：在伪图标字体未在IE9 +上正确加载css之前

Question

这是我一直面临的一个奇怪的怪癖。这是一个响应式设计，所以在我的媒体查询应用600px最大宽度后，它就像IE不能正确应用代码。正如您在图像上看到的那样，所有其他浏览器都能正确呈现这一点。这影响了所有现代IE版本，我检查了IE9，IE10和IE11。

有人有同样的问题吗？这对我来说是个谜......一个IE神秘！我“喜欢”这个浏览器...

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;
}

其他浏览器：

IE9 +：

Answer 1

我已经解决了我的问题。我没有也没有时间去理解为什么这个问题只发生在低于600px的IE上......但是我用CSS hack来解决这个问题，这可能对更多人有用。

是的，不应该使用黑客或至少避免使用黑客攻击。

你走了：

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

}

(min-width:0\0)定位IE9 +。