How to fix IE support for line break using CSS pseudo-element?


Tags: javascript,html,css,internet-explorer,internet-explorer-11

Problem :

I am just making a website on JavaScript References. For each topic I have a line break before the header with this CSS code below:

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

I tested it in all modern browsers and of course, IE 11 doesn't work as expected. I debugged IE and noticed that its properties above was strike-through, which I assumed was overridden by something else, however further investigating, I noticed IE's value set CSS with content: normal; and white-space:normal; which is not what I wanted.

CSS strike thru

NOTE: Please test this jsfiddle code in IE 11 and you'll notice, no line breaks before the headers.

I resorted to how I could obtain the content's value with css-pseudo-elements and this is what I have in js so far:

NOTE: I do feel like I shouldn't be doing all this just to make a CSS line break work in IE 11. Is there a better way to make the pseudo-element w/ content property be recognized by IE browser?

<!-- 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>

Also when I retrieve the getComputedStyle() from content in IE, its value is "\n", not "\a", not sure if that's the problem.



Solution :

IE 11 recognizes the :before pseudo-element, but it just does not render a pseudo-element that contains nothing but a line break. Whether this is correct is an interesting question, but to circumvent the issue in your case, put e.g. a no-break space (U+00A0) there before the line break. That is, replace content: "\a" by content: "\a0\a".

On the other hand, it would be easier and more flexible to set a top margin on the h3 element rather than use generated content to add an empty line.

I don’t know why IE dev tools show the settings as struck-through. This seems to be a bug/feature in those tools, since the strike-through appears even when the code is modified as suggested above, in which case the CSS has visible effect. The same applies to using, say, content: "*" for testing.


    CSS Howto..

    How may I stack multiple html/css buttons vertically along the center of the page?

    How to center text inside a div element? [duplicate]

    How to make the height of the div take all the space?

    How to remove floats so items don't wrap with CSS only in this Codepen

    How Do I Limit Scrolling to a Fixed Div?

    CSS: how to address Samsung Android browser?

    How can I change the background-color using ng-class?

    How to restrict Visual Studio 2012.2 from generating .css files in LESS editor?

    How to make line-through wider/bigger than text/element using CSS

    How to generate image sprites in ember-cli using compass?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How to customize a set of controls with CSS

    How to make my first-child in css work properly?

    How to move div to top and remove?

    How to change where a CSS transition starts from?

    How to make the green DIV fit right after 2 upper divs?

    How to rewrite this css for IE

    Codeigniter--add “active” css class to link, how to?

    How to specify BOTH max-width % and px [closed]

    How to achieve a lightbox effect with css only? Example available

    How to add CSS files for different platform devices? [closed]

    How can I make these floated divs wrap properly?

    How To Slide One Image Out From Behind Another On Hover?

    How to prevent divs from overlapping?

    How can I change the color of this text?

    How to properly use CSS borders to visualize a value chain?

    How to have a background image size (without affecting the div)?

    CSS HTML how to ignore some css for non ie7 or ie8

    My entire text in aspx page font be in arial. How to change it in css [closed]

    How to make this rounded shape with css [duplicate]