CSS：Image max-width在Firefox和IE中不起作用

问题描述：

img {
    max-width: 100% !important; /* Set a maxium relative to the parent */
    width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
    height: auto; /* Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    display: block;
    -ms-interpolation-mode: bicubic;
}

上述CSS取自 Twitter Bootstrap ，它允许响应图像。唯一的问题是这在Firefox和IE中没有效果。

The above CSS is taken from Twitter Bootstrap which allows for responsive images. The only problem is this has no effect in Firefox and IE.

在以下情况下：

<div class="row-fluid">
    <div id="logo" class="span4">
        <a href="<?= home_url( '/' ) ?>"><img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" /></a>
    </div>
</div>

http://dev.netcoding.net/lowsglass/about-us/ - 这是显示问题的页面。

http://dev.netcoding.net/lowsglass/about-us/ - Here is a page showing the problem.

在Firefox或IE ，将页面缩小到432px以下，你会看到图像不再跟随max-width（而高于764像素）。

In Firefox or IE, shrink the page to below 432px and you will see that the images do not follow max-width anymore (while above 764px they do).

修复此问题–不使用图像容器–要使响应图片在Firefox和IE中正常工作？

答

最大宽度，特别是当显示的元素：inline-block。

I've struggled a lot with Firefox / IE and max-width, specifically when on elements of display: inline-block. I use the CSS only solution below to add my fixes.

// Styles for Firefox
@-moz-document url-prefix() {
    #logo img {
        width: 100%;
    }
}

// Styles for IE10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #logo img {
        width: 100%;
    }
}

CSS：Image max-width在Firefox和IE中不起作用

相关推荐