Question

我正在努力在页面右侧制作一个简单的导航框。我在UL中基本上有五个图像链接，它们在CSS中具有悬停属性，用于设置背景位置，因此存在悬停效果。

它在Firefox，Safari，Chrome和IE7中运行良好。但是，启动IE9并且所有图像都有额外的垂直边距或者低于它们的距离大约1px，当你悬停时，放置的距离是1px或2px。

首先，我通过：

禁用了自动IE9兼容性视图

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

出于某种原因，IE9正在启用兼容性视图，这使我的元素浮动。

这是我的HTML：

<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;
}

非常感谢能够提供帮助的任何人！

Answer 1

结束搞清楚我正在使用的IE9窗口被放大了105％。足以让人无法察觉。感谢所有帮助过的人 - 这令人沮丧！

奇怪的IE9 Bug带有UL和CSS中的悬停图像

1 个答案: