0

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进行测试。

4

2 回答 2

1

Its fixed, you can check it here:

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

Or here Fiddle http://jsfiddle.net/Fqebe/1/

Cheers!

于 2013-07-27T08:31:28.813 回答
0

Internet Explorer 条件注释样式表...

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

在没有启用 JavaScript 的情况下工作。

不需要 hack，如果 IE 需要错误的值（例如高度/宽度）而不是您使用的值，那么只有您需要应用这些伪正确值的 IE 版本才能工作。

这将使您将所有与 IE 相关的讨厌的东西排除在您的主样式表之外，并且您可以为每个版本的 IE 使用特定的 IECCSS。

于 2013-07-27T08:34:30.807 回答