html - IE9 和 :after/:hover Css property causing page to grow

Question

根据微软的说法，IE8 和 IE9 支持 :after 选择器。如果里面的所有元素都是 float 的，我使用这个选择器来强制元素具有适当的高度。这允许背景正确显示，而无需指定设置高度。

我的代码通常如下所示:

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

那么现在来解决这个问题。当我在 https://spartanstats.com/reach-stats-gamertag 上添加一些 :after 到我的页面时并将鼠标悬停在页面中间的每个 li 元素上，IE9 每次都会将页面增长一行。

编辑:

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

目前我正在寻找解决此问题的方法。但我知道当网站开始失控时，我的用户可能会讨厌它!

Answer 1

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

将 min-height: 0% 应用于包含元素。