css - 与IE 11相比，:before伪元素的绝对位置问题与其他所有浏览器

请注意:不能使用单独的样式表或条件注释来标记IE11或更少，因此，我需要一个适用于所有浏览器的全局CSS的解决方案。

我在标题元素上使用“before”伪元素插入左双引号。在Chrome，Firefox，Safari Mobile等中看起来不错，但IE 11及以下版本则高30像素左右。

我已经尝试了所有我能想到的一切，但是我所做的任何事情都不会在所有浏览器中将双引号放在同一位置。

有人知道解决办法吗？

Here's my JSFiddle.

HTML:

<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</h1>

CSS:

body {
    margin: 20px;
}
h1 {
    font-family: Arial, Helvetica, Sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    position: relative;
    padding-left: 44px;
}
h1:before {
    font-weight: bold;
    font-size: 70px;
    font-size: 4.375rem;
    line-height: 50px;
    line-height: 3.125rem;
    position: absolute;
    top: 6px;
    left: -5px;
    content:"“";
}

Chrome :

IE 11:

最佳答案

不确定使用rems对您的项目是否至关重要，但是从line-height: 3.125rem;中删除h1:before将使其在IE11中呈现相同的外观。

我听说IE11的rems有一个line-height的错误。我将查看是否可以找到此源。

编辑:

该错误已提交给IE小组，但尚未修复。 See this。用户使用Modernizr答复解决方法。无法直接链接到解决方法，但引用如下:

由 lmeurs 发表于07.04.2014 at 04:59

一种解决方法是将Modernizr与以下自定义测试一起使用，该自定义测试使用rems定义的线高来测试伪元素的高度。

// Based on https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/generatedcontent.js
Modernizr.testStyles('#modernizr{font:0/0 a}#modernizr:after{content:":)";visibility:hidden;font:7px/1 a; line-height: 5rem}', function( node ) {
    Modernizr.addTest('pseudoelementlineheightinrems', node.offsetHeight >= 10);
});

现在，Modernizr在HTML标记中添加了“pseudoelementlineheightinrems”或“no-pseudoelementlineheightinrems” CSS类，可用于应用不同的样式