IE6的bug。当a：触发悬停时，Div的高度会增加

Question

我有一个页面，里面有一个“标签”列表，就像在这里一样，当鼠标悬停在它上面时，它会变暗。

它适用于Ie7,8，FF，Chrome，Safari等...但IE6有一个错误，当a：触发悬停时。

错误是包含那些（ul li a）的div会增加高度。

我拥有的CSS是：

div.options ul.tags li a:hover
{
    background-color: #D5E4A5;
}

如果我删除此样式或只是评论“background-color：＃D5E4A5;”它不会发生......

有关如何修复它的想法吗？

谢谢！

编辑：这是错误的屏幕截图：

Answer 1

刚修好了！ ：d

之前我所拥有的是：

<div class="options clearfix">
    <!--content here-->
</div>

我替换为：

<div class="options">
    <div class="clearfix">
        <!--content here-->
    </div>
</div>

现在IE6很开心，我也很开心......

谢谢大家的帮助！

Answer 2

这通常是最初未定义的边框设置。尝试将不断增长的DIV上的边框设置为默认背景颜色。我的猜测是你不会再看到任何增长了。

Answer 3

我想我遇到过这一次，发生的事情是边界正在被修改（或者它是边缘？）我最终结束了，只是给有问题的元素一个1px的透明边框，并调用这一天。

我真的怀疑这会成为你的解决方案，但我希望它会让你知道在哪个方向上看！

Answer 4

我也遇到过这种情况，但我不记得究竟是哪里。我想我确实解决了它，但我不完全确定它是怎么回事。我可以想到两件事：

1. 提供元素"layout"。我倾向于使用zoom: 1。

2. 将vertical-align: top添加到a或li元素。

你能提供更完整的代码示例吗？我只能用CSS来重现它。

Answer 5

您是否明确指定了该div的高度？如果没有，设置高度可能会消失。

Answer 6

标签是否位于可以始终为其提供背景颜色的位置？如果是这样，在以下情况下设置背景颜色：悬停未激活仍会导致其高度发生变化吗？

作为一个注释，我无法重现这个给定的HTML符合您描述的规则，因此问题可能来自页面上更高的其他位置。

<!-- This does not display the described behavior -->
<div class="options">
  <ul class="tags">
    <li><a href="#">c++</a></li>
    <li><a href="#">not-programming-related</a></li>
    <li><a href="#">cheese</a></li>
    <li><a href="#">barnacle</a></li>
  </ul>
</div>

我能建议的最好的事情就是做mercator所说的并给出元素布局。

编辑：只是在黑暗中拍摄，但您可能想尝试在 div.options 上设置 line-height 的值。

编辑2：看到你的截图后我记得我以前在工作中遇到过这个问题，而我的案例中的修复是将 position:relative; zoom:1;添加到容器（或者链接，我忘了！）。试试吧？

编辑3：在某些解决方案googling之后，您可能需要尝试明确设置容器的高度。如果this不起作用，我不知道该怎么做！

Answer 7

我也有这个问题。触发器肯定是悬停时的背景颜色，但是通常给出父级hasLayout的解决方案不起作用，我认为是因为将A标签嵌套在其他标签内。从我最终做的事情来看，嵌套清晰修复的解决方案是正确的逻辑：分离违规元素，父元素和清除对象。

我所做的解决方案如下：

<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>

使用以下CSS：

.ie6clear{ clear:both; height:0; overflow:hidden; }

这样，clearfix CSS仅适用于IE6，突出显示无关标记的内容，并且在不再支持IE6时可以轻松删除。