logo标签列表

IE6 bug. 当触发a:hover时，Div的高度会增加。

cssinternet-explorer-6
5

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

在Ie7、8、FF、Chrome、Safari等浏览器中都能正常工作，但IE6有一个bug，当a:hover被触发时。

这个bug是这样的：包含那些(ul li a)的div会增加高度。

我所拥有的css是:

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

如果我删除或注释掉“background-color: #D5E4A5;”这个样式，就不会出现这种情况...

你有什么解决方法吗？

谢谢！

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

alt text

不错的截图。不过需要更多的代码。 - Crescent Fresh
你能发布一下你的网站链接吗？ - strager
好的，还有很多工作要做，我会上传 .html + css 文件，并尽快更新这个问题...谢谢！ - Bruno
7个回答
3

just fixed it! :D

what I had before was:

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

我替换成了：
<div class="options">
    <div class="clearfix">
        <!--content here-->
    </div>
</div>

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

感谢大家的帮助！

1

通常情况下，这是由于未定义原始边框而导致的。尝试将默认背景颜色设置为增长 DIV 的边框。我猜你不会再看到任何东西增长了。

0

我想我曾经遇到过这个问题，可能是边框被修改了（或者是外边距？）最后我选择了放弃，给有问题的元素加上一个1像素的透明边框，然后就算了。

我真的不太确定这会不会成为你的解决方案，但我希望它能让你知道应该往哪个方向寻找答案！

0

我也遇到过这种情况，但我不记得具体是在哪里了。我想我已经解决了它，但我不太确定怎么做了。我能想到两件事：

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

  2. 将vertical-align: top添加到a或li元素中的任意一个。

你能给出更完整的代码示例吗？我无法仅凭CSS重现它。

0

你是否明确指定了该 div 的高度？如果没有，设置高度可能会解决此问题。

0

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

我所做的解决方案如下：

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

使用以下CSS：

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

这种方式只针对IE6应用clearfix CSS，突出显示多余的标记，并在不再支持IE6时轻松删除。

0

标签是否位于可以始终为其设置背景色的位置？如果是，则在未激活:hover时设置它们的背景颜色是否仍会导致其高度发生变化？

值得注意的是，我无法重现您所描述的规则匹配的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所说的给元素布局。

编辑：可能有点靠不住，但你可以尝试在

上设置line-height的值。

编辑2：看了你的截图后，我想起我以前在工作中也遇到过这个问题，解决方法是在容器(或者链接，我忘了！)上添加position:relative;zoom:1;。你可以试试这个方法？

编辑3：谷歌搜索了一些解决方案后，你可以尝试显式地设置容器的高度。如果这个不起作用，我就不知道该怎么办了！

没起作用......尝试了在各处加zoom:1和position:relative....感谢您的尝试！！ - Bruno
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接