如何使用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代码 ，你会注意到，在标题之前没有换行符。

我使用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伪元素:before ，但它只是不呈现一个只包含换行符的伪元素。 这是否正确是一个有趣的问题，但为了避免在你的情况下的问题，在换行前放置一个不间断的空间（U + 00A0）。 也就是说，用content: "\\a"替换content: "\\a" content: "\\a0\\a" 。

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

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