IE9和：after /：悬停的CSS属性导致页成长

Question

据微软称，IE8和IE9支持：选择后。如果所有内部元素都是浮动的，我使用这个选择器强制元素具有适当的高度。这允许背景正确显示，而不必指定设置的高度。

我以后代码通常是这样的：

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

所以现在到了错误。当我添加了一些内容时：在我的页面https://spartanstats.com/reach-stats-gamertag之后，我将鼠标悬停在页面中间的每个li元素上，IE9每次只增加一行。

编辑：

经进一步调查的：在每个动态生成li元素的悬停属性是貌似问题的根本原因。删除li的悬停代码修复了问题。当然，这不是我希望的解决方法。我会继续调查。

目前我迷失在寻找解决这个问题。但是我知道我的用户会在网站开始失控时憎恨网站！

Answer 1

你有没有尝试使用的

content: '.'; 

content: ''; 

，而不是在你的后元素具有字符，并设置为使用

display: block; 
visibility: hidden; 

仍然会导致元件取不同于当您使用时页面上的空间：

个

display: none; 

我的猜测是，即使你设置的高度：元素后为0，。在元素中导致Internet Explorer呈现不需要的高度。

Answer 2

碰到这个问题我自己。它可能与this issue

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