Text-overflow inherits fonts from pseudo-elements in IE

Question

I came across an unusual error reproduced in IE9 where the text-overflow ellipse inherits the font styles of the :before and :after pseudo-elements.

See the fiddle: http://jsfiddle.net/c7zgD/7/

This will not be a serious problem, except in my case I use the icon font to prefix some text, and therefore the ellipsis comes out as missing glyphs.

Does anyone know a fix for this?

Answer 1

I have used this solution in the past ... Add an empty char with:

 .btn:before { content: ''; } 

http://jsfiddle.net/tagliala/TtbuG/10/