IEは、最初のLIの後に垂直なスペースを非常に単純なメニューで追加します。

Question

IEに問題がありますか？

私は背景を持つリストを作成します。 最初のLIと最後のLIは5pxの高さで、他のLIは16pxの高さです。

IEは、最初のLIと2番目のLIの間に空白スペースを作成します。 当然、FF & Safariは正常に動作します。

私は結果なしで多くのことを試みました。 しかし、私はここで

は私のCSSで...それを管理する方法がわからない。ここで

ul { 
    list-style:none; 
    margin:40px; 
} 
li { 
    padding:0px; 
    margin:0px; 
    width:137px; 
    height:0px; 
    padding-left:10px; 
} 
.li_norm { 
    height:16px; 
    background:url(images/modele/li_norm.gif) no-repeat; 
} 
.li_over { 
    color:#ffffff; 
    font-weight:bold; 
    height:16px; 
    background:url(images/modele/li_over.gif) no-repeat; 
} 
.li_haut { 
    height:5px; 
    background:url(images/modele/li_haut.gif) no-repeat; 
} 
.li_bas { 
    height:5px; 
    background:url(images/modele/li_bas.gif) no-repeat; 
} 

は私のjQueryのコードです：ここで

$("#conteneur").append('<ul />'); 
$("#conteneur ul").append('<li class="li_haut"></li>'); 
var a= ["Essai 1", "Essai 2", "Essai 3"]; 
for (var i = 0, j = a.length; i < j; i++) { 
    $("#conteneur ul").append('<li id="new_'+i+'" class="li_norm">'+a[i]+'</li>'); 
} 
$("#conteneur ul").append('<li class="li_bas"></li>'); 

は私の問題の写真です：

Bad IE comportment with LI

ご協力いただきありがとうございます。

Asterix93

Answer 1

あなたがいないコンテンツと5pxの高さと空の李（li_haut）を追加しています。ライン高さを5pxに設定するか、スペーサーgif（shudder）を追加してIEの高さを尊重してみてください。私はあなたがIEデベロッパーツールを使用していれば、最初のLIはそのギャップを作っていることを知っているでしょう。

トップスタイルを適用する方が良い/異なる方法は、ULにバックグラウンドを持たせることです。パッキング/空の最初のLIを追加しないでください。または、上のコンテナ画像をULを含むコンテナの背景として置き、余分なLIを持たないようにULの背景を下にします。

それ以外のところでは、$("#conteneur ul")ではなく、ルックアップの数を減らすために変数に入れることをお勧めします。

Answer 2

これがうまくいくかどうかはわかりませんが、.li_hautクラスにoverflow:hiddenを付けてみてください。

.li_haut { 
    height:5px; 
    overflow:hidden; 
    background:url(images/modele/li_haut.gif) no-repeat; 
} 

Answer 3

新しいプロジェクトごとにCSS reset stylesheetを使用すると便利でしょう。