水平メニューIE7とIE8の互換性問題

Question

Firefox 6、IE9、Safari、Chrome、Operaでは完全に機能する横長のメニューを作成しましたが、IE7では& IE8の最後のリンクが次の行に壊れていますメニューのスクリーンショット次のように

水平メニュー http://imageshack.us/photo/my-images/819/ie9screenshot.jpg/

水平メニューのIE8スクリーンショット

http://imageshack.us/photo/my-images/696/ie8screenshot.jpg/

のIE9スクリーンショットHTMLとCSSのコードは次のとおりです。 -

HTMLコード： -

<ul class="menu"> 

     <li class="first"><a href="#">Bridal</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Bridesmaid</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Gentleman's</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Flower Girl</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Special Occassion</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Accessories</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Shoes</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li class="last"><a href="#">Sale</a></li> 

    </ul> <!-- END OF MENU --> 

CSSコード： -

ul.menu { 
width: 965px; 
height: 44px; 
font-size: 18px; 
color: #ffffff; 
list-style: none; 
margin: 0px; 
padding: 0px; 
} 

ul.menu li { 
float: left; 
background-repeat: no-repeat; 
margin: 0px; 
padding: 0px; 
} 

ul.menu li a { 
height: 34px; 
color: #ffffff; 
text-align: center; 
display: block; 
background-image: url(images/menu-normal.jpg); 
background-repeat: repeat-x; 
margin: 0px; 
padding: 10px 17px 0px 17px; 
} 

ul.menu li.first { 
background: none; 
} 

ul.menu li.first a { 
width: 88px; 
background-image: url(images/first-normal.png); 
margin: 0px; 
padding: 10px 0px 0px 8px; 
} 

ul.menu li a:hover { 
background-image: url(images/menu-hover.jpg); 
background-repeat: repeat-x; 
} 

ul.menu li.first a:hover { 
background-image: url(images/first-hover.png); 
} 

ul.menu li.last a { 
width: 68px; 
background-image: url(images/last-normal.png); 
margin: 0px; 
padding: 10px 8px 0px 0px; 
} 

ul.menu li.last a:hover { 
width: 68px; 
background-image: url(images/last-hover.png); 
} 

私はこれと他のフォーラムでいくつかの同様の記事が見つかりましたが、それらのどれも有用ではなかったです。私はリスト位置を試みた：内側;表示：インライン;それらのどれも働かない。 IE9ブラウザでhtmlページを表示していますが、IE7とIE8互換モードでチェックしています。私は同じ問題を抱えていた

おかげで、 ラジ

Answer 1

は、IEがあなたのメニューにもう少し幅を与え、その後の位置を修正する場合がありますので、目に見えないマージンやパディングを追加したいと思われる、私が使用することをお勧めIE用の別のCSSファイル。