css - :before pseudo element with IE 11< vs. 所有其他浏览器的绝对位置问题

Question

请注意:使用单独的样式表或条件注释来标记 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:

Answer 1

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

我听说 IE11 有一个关于 rems 的错误 line-height。我会看看是否可以找到它的来源。

---

编辑:

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

由 lmeurs 于 07.04.2014 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 类，可用于应用不同的样式