绝对位置问题：使用IE 11之前的伪元素＆lt;与所有其他浏览器相比

Question

请注意：使用单独的样式表或条件注释标记IE11或更低版本不是一个选项，因此我需要一个适用于所有浏览器的全局CSS解决方案。

我使用＆＃34;之前＆＃34;标题元素上的伪元素，用于插入左双引号。它在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:"“";
}

铬：

IE 11：

Answer 1

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

我听说IE11有rems line-height的错误。我会看看能不能找到这个来源。

---

修改

该错误已提交给IE团队，但尚未修复。 See this。用户使用Modernizr回复解决方法。无法直接链接到变通方法，但引用如下：

发表于 lmeurs 于2014年4月7日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现在添加了一个“假元素线”，并且正在添加一个＆＃39; pseudoelementlineheightinrems＆＃39;或者＆＃39; no-pseudoelementlineheightinrems＆＃39; HTML标记的CSS类，可用于应用不同的样式

Answer 2

试试这个

在10和11等伪类中使用相对字体大小和行高确实存在问题。

我已经删除了伪类的相对位置（默认情况下应该是静态的），以及我重置为0的行高;

然后我使用垂直对齐来定位伪类。这应该会产生预期的效果。

h1:before {
font-weight: bold;
font-size: 70px;
font-size: 4.375rem;
line-height: 0;
margin-left: -2rem;
content:"“";
vertical-align: bottom;

}

http://jsfiddle.net/205bhkau/2