如何使用CSS伪元素修复IE对换行符的支持？

Question

我正在制作一个关于JavaScript References的网站。对于每个主题，我在标题前面有一个换行符，下面是这个CSS代码：

h3:before{
    content: "\a";
    white-space: pre;
}

我在所有现代浏览器中测试过，当然，IE 11无法按预期工作。我调试了IE并注意到它上面的属性是删除，我认为被其他东西覆盖，但是进一步调查，我注意到IE的值设置CSS content: normal;和white-space:normal;这不是我的想要的。

注意：请在IE 11中测试此jsfiddle code，您会注意到标题前没有换行符。

我采用了如何使用css-pseudo-elements获取内容的值，这是我到目前为止在js中的内容：

注意：我觉得我不应该这样做只是为了在IE 11中使CSS换行工作。有没有更好的方法来使IE浏览器识别伪元素w / content属性？

<!-- Override Fix IE Bug that sets content:normal; & white-space:normal; -->
<script type="text/javascript">
    "use strict";
    //var contentProperty = window.getComputedStyle(document.querySelector('h3'), ':before').getPropertyValue('content');
    //var whiteSpace = window.getComputedStyle(document.querySelector('h3'), ':before').getPropertyValue('white-space');
    var h3 = document.querySelector('h3'), // returns h3
    contentProp = getComputedStyle(h3, ':before').content.toLowerCase().trim(); // returns "\a " ; IE returns "\"\n\""
    console.log("content : ", contentProp);
    if(contentProp !== "\"\\a \"" || contentProp === "normal" || contentProp === "")
    {
        contentProp = "\"\\a\""; // force IE to put value "\a" instead of "\n"

    }
    console.log("content : ", contentProp); // test value again

    var sheet = (function() {
    // Create the <style> tag
    var style = document.createElement("style");

    // Add a media (and/or media query) here if you'd like!
    // style.setAttribute("media", "screen")
    // style.setAttribute("media", "only screen and (max-width : 1024px)")

    // WebKit hack :(
    style.appendChild(document.createTextNode(""));

    // Add the <style> element to the page
    document.head.appendChild(style);

    return style.sheet;
    })();

    // ERROR: IndexSizeError
    sheet.insertRule("h3:before{content: '\a'; white-space: pre;}", 1);
    sheet.addRule("h3:before", "content: '\a'; white-space: pre;", 1);
</script>

此外，当我从IE中的content检索getComputedStyle（）时，其值为"\n"，而不是"\a"，不确定这是否是问题。

Answer 1

IE 11识别:before伪元素，但它不会渲染只包含换行符的伪元素。这是否正确是一个有趣的问题，但为了避免你的问题，例如，换行前的不间断空间（U + 00A0）。也就是说，将content: "\a"替换为content: "\a0\a"。

另一方面，在h3元素上设置上边距而不是使用生成的内容添加空行会更容易也更灵活。

我不知道为什么IE开发工具会将设置显示为突破。这似乎是这些工具中的一个错误/功能，因为即使在如上所述修改代码时也会出现删除，在这种情况下CSS具有可见效果。这同样适用于使用content: "*"进行测试。