2

I’ve created an element a h4 element which the :before pseudo element to insert an icon font (generated at IcoMoon). The h4 element is set to text-align: center; and the icons are set to display: block; so that they also center. Perfect!

The problem is in IE8. The h4 elements are centered but the icons inserted using :before are left-aligned. I’ve tried giving the before element a text-align: center property and I also tried applying:

display: block;
width: 80px;
margin: 0 auto;

Now I don’t know what to try next. Here is the code for the icons:

[class^="ico-fonts-"]:before, 
[class*=" ico-fonts-"]:before {
    font-family: @icoFont;
    font-style: normal;
    speak: none;
    font-weight: normal;
    line-height: 1;
}

Any suggestions would be appreciated! :-)

2 Answers2

2

So I found the answer to my own question and it’s this:

Internet Explorer 8 treats the content generated by the :before and :after as outside of the element.

However, all other browsers (except IE7) treat the content generated by the :before and :after pseudo-elements as part of the element.

So I simply had to write:

.ico-fonts:before { text-align: center~"\9"; }

0

Have you tried adding zoom:1 yet? Fixes a lot of IE8 CSS quirks.

Krayg
  • 635
  • 5
  • 9
  • yep, tried that and it didn’t work. I’m testing in BrowserStack so I’m hoping that’s a true representation. –  Jan 11 '13 at 10:58
  • IE8 doesn’t actually use the hasLayout property, so using the zoom: 1; hack is pointless as it will do nothing. However, IE7 and below do have the hasLayout property, so feel free to use it to solve your hacks in these browsers. –  Feb 15 '13 at 18:10