0
私はページの右側に簡単なナビゲーションボックスを作ることに取り組んでいます。私は基本的に、背景位置を設定してホバー効果があるように、CSSにホバープロパティを持つ5つのイメージリンクをULに持っています。奇妙なIE9バグULとCSSの画像をホバー
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です!
あなたを取得しません。 Windows 7のIE9とFF5.01ではまったく同じように見えますか? – Jawad
右側のナビゲーションボックスが表示されますか?画像には垂直方向にマージンがあり、マウスを動かすとシフトします。私はあなたがマウスを動かすときより明るくなるようにイメージのテキストを変えたいだけです。 – Sam
IE9とChromeの間に変更は見られません。IEでマウスを動かすと、別のものは表示されません。アンカータグではなく、背景イメージとli要素へのホバー変更が必要な場合があります。アンカータグのスタイリングは、期待通りに機能しないことがあります。 – BDawg