IE not coloring :before as table-cell, why?

问题

<!DOCTYPE html>
<html>
    <head>
        <style>
        div:before {
            display: table-cell;
            content: "ABC";
            color: red;
        }
        </style>
    </head>
    <body>
        <div>123</div>
    </body>
</html>

I'd expect this to render to something like

, but I get

instead, only when running on Internet Explorer (any version).

Is this a bug or I'm doing something wrong?

回答1:

This appears to be a bug in IE. If you inspect the element in IE 11 Developer Tools, you see all the declarations for the :before pseudo-element struck out (also e.g. font settings if you add them), but the display and content settings affect the rendering.

To circumvent this bug, it suffices in this simple case to set display: block as @BeatAlex suggests. In a more complicated situation, you probably need more complicated workarounds.

回答2:

This appears to be a regression. It works on IE8 on Windows 7, but not IE9 or later, even in IE8 mode. Funny I didn't notice this earlier, as I remember encountering the same issue myself some time ago. I never considered something like this could possibly regress, though, much less thought of comparing the results in IE8 and IE9.

Other font-related styles are affected as well. It has been reported before, but there doesn't seem to have been any response other than "we're looking into it", and that was a year ago.

Workarounds include using display: table-cell with an actual element instead of a pseudo-element, or simply not using display: table-cell at all — use display-block instead if you don't absolutely need a table-based layout.

来源：https://stackoverflow.com/questions/24693227/ie-not-coloring-before-as-table-cell-why

标签

html

css

internet-explorer

pseudo-element