奇妙なIE9バグULとCSSの画像をホバー

Question

私はページの右側に簡単なナビゲーションボックスを作ることに取り組んでいます。私は基本的に、背景位置を設定してホバー効果があるように、CSSにホバープロパティを持つ5つのイメージリンクをULに持っています。

Firefox、Safari、Chrome、IE7では正常に動作します。しかし、IE9を起動すると、画像には余白や間隔が1px程度余分にあり、ホバーを置くと1pxまたは2pxずれます。

私が持っていることによって自動IE9互換表示を無効にまず第一に：

<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" /> 

を互換性ビューが浮動私の要素を台無しIE9でオンになっていたいくつかの理由。

<div id="right"> 
    <ul id="greenpractices"> 
     <li id="rightmission_water"><a href="water.html">Water</a></li> 
     <li id="rightmission_air"><a href="air.html">Air</a></li> 
     <li id="rightmission_innovation"><a href="innovation.html">Innovation</a></li> 
     <li id="rightmission_energy"><a href="energy.html">Energy</a></li> 
     <li id="rightmission_design"><a href="design.html">Design</a></li> 
    </ul> 
</div> 

とCSS：助けることができる誰にでも

#right { 
float: left; 
display: inline; 
width: 286px; 
border-top: 1px solid #686868; 
padding: 17px 16px 0px 17px; 
} 

ul#greenpractices { 
list-style-position: outside; 
list-style-type: none; 
width: 286px; 
height: 260px; 
} 

ul#greenpractices li, ul#greenpractices li a, ul#greenpractices li a:active, ul#greenpractices li a:visited { 
position: relative; 
display: block; 
width: 286px; 
height: 52px; 
text-indent: -99999px; 
} 

ul#greenpractices li a:hover { 
background-position: 0 0; 
} 

li#rightinnovation_innovation a { 
background: url('images/rightinnovation_innovation.jpg') bottom; 
} 

li#rightinnovation_air a { 
background: url('images/rightinnovation_air.jpg') bottom; 
} 

li#rightinnovation_water a { 
background: url('images/rightinnovation_water.jpg') bottom; 
} 

li#rightinnovation_energy a { 
background: url('images/rightinnovation_energy.jpg') bottom; 
} 

li#rightinnovation_design a { 
background: url('images/rightinnovation_design.jpg') bottom; 
} 

感謝

は、ここに私のHTMLです！

Answer 1

私が使用していたIE9ウィンドウが105％拡大されていることが分かりました。目立たないほど十分です。助けてくれた皆さん、ありがとうございました。