0

这是我一直面临的一个奇怪的怪癖。这是一个响应式设计，所以在我应用了 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+： 在此处输入图像描述

4

1 回答 1

0

我已经解决了我的问题。我没有也不必花时间去理解为什么这个问题只发生在 600 像素以下的 IE 上……但我用一个 CSS hack 来解决这个问题，这可能对更多人有用。

是的，不应使用或至少尽量避免使用 hack。

干得好：

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

}

(min-width:0\0)目标 IE9+ 。

于 2014-02-27T18:49:16.493 回答