css – 绝对位置问题：具有IE 11之前的伪元素<与所有其他浏览器

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

铬：

IE 11：

解决方法

不确定使用rems是否对您的项目至关重要,但删除线高度：3.125rem;从h1：之前将使它在IE11中渲染相同.

我听说IE11有一个bug的线高的rems.我会看看我能找到一个来源.

编辑：

该bug已经提交给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类