{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 冷血范 的问题《IE not coloring :before as table-cell, why?》','https://www.manongdao.com/q-240667.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
<!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?
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
:beforepseudo-element struck out (also e.g.fontsettings if you add them), but thedisplayandcontentsettings affect the rendering.To circumvent this bug, it suffices in this simple case to set
display: blockas @BeatAlex suggests. In a more complicated situation, you probably need more complicated workarounds.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-cellwith an actual element instead of a pseudo-element, or simply not usingdisplay: table-cellat all — usedisplay-blockinstead if you don't absolutely need a table-based layout.