:before pseudo icon font is not loading css correctly on IE9+

Question

This is a strange quirk I've been facing. This is a responsive design so after my media query for 600px max width is applied it's like IE does not apply correctly the code. All the rest of browsers render this correctly as you can see on the images. This is affecting all the modern IE versions, I checked on IE9, IE10 and IE11.

Has somebody had the same problem? It's a mystery for me... a IE mystery! I "love" this browser...

HTML:

<figure class="animation-booking clearfix">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-filter.jpg" alt="" class="hotel-filter">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-holet-list.png" alt="" class="hotel-list js-hotel-list">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-hotel-detail.png" alt="" class="hotel-detail js-hotel-detail">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-best-deal.jpg" altz="" class="best-deal">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-small-screen.png" altz="" class="booking-small">
                    <figcaption class="icon-load icon-arrow">Filteren en meer informatie over je bestemming. Allemaal op dezelfde pagina.</figcaption>
                </figure>

CSS:

@media only screen and (max-width: 600px){
    top: 85px;
    left: 175px;
    -ms-transform: rotate(290deg) scaleX(-1);
    -webkit-transform: rotate(290deg) scaleX(-1);
     transform: rotate(290deg) scaleX(-1);
     font-size: 2em;
     position: absolute;
     font-family: 'icomoon';
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

Other browsers: enter image description here

IE9+: enter image description here

Do you have a link to somewhere we can run the code. Without seeing what else is interacting with it, it is almost impossible to say what is happening. What is the actual issue? The title says about an icon font not loading, but I don't see what is missing in the screenshot, and you don't show how the font is included in the code sample. It looks like the difference there is the positioning of the arrow. Your CSS in the media query is wrong. It doesn't apply to any elements as there is no selector and { } around the CSS declarations inside the query. — David Storey, Feb 27 '14 at 18:31

score 0 · Accepted Answer · answered Feb 27 '14 at 18:49

I already solved my issue. I didn't and don't have to time to understand why this is this issue happening only on IE from 600px lower... But I targeted the issue with a CSS hack which could be useful for more people.

Yes, a hack should not be used or at least avoided to the maximum.

Here you go:

@media screen and (max-width:600px) and (min-width:0\0) {

}

The (min-width:0\0) targets IE9+.

:before pseudo icon font is not loading css correctly on IE9+

1 Answers1