IE9和:after/:hover Css属性会导致页面增长

Question

据微软表示，IE8和IE9支持:after选择器。我使用这个选择器来强制元素具有正确的高度，如果所有内部元素都浮动。这允许背景正确显示，而不必指定固定高度。

我的after代码通常如下所示：

.after:after{
    content: '.';
    height:0;
    line-height: 0;
    display:block;
    clear:both;
    visibility:hidden;
}

现在来说说这个bug。当我在https://spartanstats.com/reach-stats-gamertag页面中添加了一些:after，然后悬停在页面中间的每个li元素上时，IE9会每次增加一页。

编辑：

经过进一步调查，动态生成的每个li元素上的:hover属性似乎是问题的根本原因。删除li的hover代码可以解决问题。当然，这不是我希望得到的解决方案。我将继续调查。

目前我还在寻找解决这个问题的方法。但我知道，如果网站开始失控，我的用户可能会讨厌它！

- Vance

---

好吧，似乎没有人对这个问题感兴趣，没关系。我有一个糟糕的解决方案（移除悬停），我将在IE9中实现，直到我找到更合适的补丁/修复程序。谢谢。 - Vance

看起来网址挂了，你能发一下 JSFiddle 吗？ - Rajkamal Subramanian

Answer 1

我自己也遇到过这个问题。它可能与 this issue 有关。

在包含元素上应用 min-height: 0%。

- patocallaghan

Answer 2

你尝试过使用吗？

content: '';

替代

content: '.';

在您的after元素中设置一个字符并将其用于。

display: block;
visibility: hidden;

仍会导致元素在页面上占据空间，不像使用以下方式：

display: none;

我的猜测是，即使您将:after元素的高度设置为0，该元素中的“.”会导致Internet Explorer渲染出不必要的高度。

- Jeff Jewiss