Question

今天我发现了一个让我感到困惑的互联网浏览器错误。显然，如果在：after和：hover :: after之后设置了font-size，则Internet Explorer会将（？）字体大小加倍（？）。

我已经设置了一个快速演示，并提出了一个我不喜欢的解决方法，因为如果你想要显示以下内容：after和：hover :: after状态，它将无效。有没有人知道什么可能导致这种行为以及如何正确地解决它？

:hover{} /* Fixes pseudo-element animation on :hover
            for Internet Explorer 10 */

.workaround::after {
    content: "";
    font-size:2em;
}

.workaround:hover::after {
    color:green;
    content:", internet explorer";
}

.iebug::after {
    content: "";
    font-size:2em;
}

.iebug:hover::after {
    color:green;
    font-size:2em;
    content:", internet explorer";
}

Answer 1

测试你的JS.Fiddle我在IE上遇到了同样的问题。我发现，如果我将font-size从em更改为px，则悬停内容会按预期显示。你可以see your update fiddle here。

我做了一些研究并在CSS-Tricks网站上找到了这个引用，我相信你的情况也会发生同样的概念。

ems还有一些令人讨厌的东西，比如级联。如果你决定列表项应该是font-size：1.1em然后有嵌套列表，它将级联和增长子的字体大小名单。你可能不想那样。你可以用li li修复它{ font-size：1em;但那就是可以磨砺你的东西葫芦。这就是rem可以进入的地方，但这也很棘手因为浏览器支持较少（IE 9 +）。

所有这些说你可以改变你的字体大小以使用em以外的东西，你应该是好的。

您可以阅读similar question posted here on SO。

Internet Explorer奇怪的字体大小行为：after和：after :: hover伪类

1 个答案: