IEのバグに問題があります - CSS

Question

私はCss Globeの簡単なスライダーを借りましたが、ページ上にレイアウトするように変更しました。

/* numeric controls */ 



ol#controls{ 
    margin:0.2em 1em; 
    padding:0; 
    height:16px; 
    float:right; 
    font-size:x-small; 
    font-family: Arial, Verdana, Default; 
    font-weight:normal; 
} 

ol#controls li{ 

    padding:0; 
    float:left; 
    list-style:none; 
    height:16px; 
    width:20px; 
    background:yellow; 
    margin:10px; 
} 

ol#controls li a{ 
    height:16px; 
    line-height:18px; 
    border:1px solid #ccc; 
    background:#FFFFFF; 
    color:#555; 
    padding:0 5px; 
    text-decoration:none; 
    float:right; 
} 

ol#controls li.current a{ 
    background:#736357; 
    color:#fff; 
} 
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;} 

私はそれを把握することができなかった - IE7/8スライドショーナビは（1,2,3,4）が広く普及され、それらが互いに近い順に配置されなければならない場合。広がっている例を見てください。

なぜ奇妙に動作しているのですか？ありがとうございました！

Answer 1

IE8でテストします。

あなたはこれを持っている：

それはIE7だかのようにIE8の振る舞いになり

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

- それは素晴らしいではありませんが、それは問題ではありません。

：〜ラインで

<!--[if IE 7]> 
<link type="text/css" rel="stylesheet" href="css/homepage_css/hpie7.css" /> 
<![endif]--> 

がhpie7.cssの75、あなたがこれを持っている：あなたはこのCSSファイルを持っている

は、それが（それが原因で上記の "ある"）IE7をだ場合のみが含まれています

ol#controls li{ margin:10px 100px 0 0; padding:0; float:left; list-style:none; height:16px; line-height:18px; } 

margin行を削除すると、数字は100pxの代わりにもう一度近くになります。あなたが（それはIE7のためだけですので、同じファイル内）にすると、このような<ol>に幅を追加する必要がありますように見えます

：

ol#controls{ 
    .. 
    width: 100px 
}