Question

然而，Internet Explorer再次耗费我的时间和金钱。

我正在创建一个响应式网站，我需要我的图片不超过其包含元素的100％宽度，但也不超过一定百分比的高度，以防它们从页面上掉落。

一些CSS：

#content{

    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;

}

#featured{

    position:relative;
    width:100%;

}

#featured-images{

    text-align:center;

}

#featured-images img{

    max-height:80%;
    height:auto !important; /* IE fix */
    height:80%; /* IE fix */

    max-width:100%;
    width:auto !important; /* IE fix */
    width:100%; /* IE fix *

}

一些加价：

<div id="content">
  <div id="featured">
    <div id="featured-images">
      <img src="lib/imgs/fi-1.jpg"/>
    </div>
  </div>
</div>

目前，此页面适用于Chrome。它甚至适用于IE6和IE8 +。我没有在Firefox或Opera中测试它。但IE 7肯定不会打球。它似乎将图像缩小到相当小的程度，就好像浏览器被调整为一个树桩一样。

我知道这不太理想，但我一直在使用IE NetRenderer进行测试。

Answer 1

它已修复，你可以在这里查看：

<style type="text/css">
#content {
    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;
}
#featured {
    position:relative;
    width:100%;
}
#featured-images {
    text-align:center;
}
#featured-images img {
    max-height:100%;
    max-width:100%;
    height:auto;
    width:auto;
}
</style>

<div id="content">
    <div id="featured">
        <div id="featured-images">
            <img src="https://www.google.co.in/images/srpr/logo4w.png" />
        </div>
    </div>
</div>

或者这里小提琴http://jsfiddle.net/Fqebe/1/

干杯！

Answer 2

Internet Explorer条件评论样式表...

http://www.jabcreations.com/web/css/ieccss

在未启用JavaScript的情况下运行。

如果IE需要错误的值（例如高度/宽度）而不是您使用的值，则不需要黑客攻击，那么只需要应用这些伪权限值的IE版本才能正常工作。

这样您就可以将所有与IE相关的肮脏行为保留在主样式表之外，并且每个版本的IE都可以使用特定的IECCSS。

Internet Explorer 7中图像的最大宽度和最大高度

2 个答案: