IE8不兼容模式，图片最大宽高：自动答案

【问题标题】：IE8 non-compatibility mode, image with max-width and height:autoIE8不兼容模式，图片最大宽高：自动
【发布时间】：2013-05-02 23:05:47
【问题描述】：

我有一张带有此标记的图片

<img src="wedding_00.jpg" width="900" height="600" />

我正在使用 CSS 将其缩小到 600 像素宽度，如下所示：

img {
    max-width:600px;
    height:auto;
}

谁能解释为什么此方法在兼容模式下有效，但在标准模式下无效？有没有办法可以修改我的 CSS 使其在标准模式下工作？

我意识到如果我去掉

width="900" height="600"

它解决了问题，但这不是我的选择。

【问题讨论】：

标签： internet-explorer-8 css compatibility-mode

【解决方案1】：

我不确定根本原因，但如果你添加

width: auto;

然后就可以了。

【讨论】：

精彩，完美运行。我不认为我会在一百万年内尝试过。
@JaredHenderson 你的评论让我很开心
它不适用于宽度：50%；所以它不是那个 IE8 错误的真正解决方案。有人有解决问题的线索吗？ img { width:50%; max-width: Npx; }
为我解决之前的评论：zeilenwechsel.de/it/articles/5/How-max-width-fails-in-IE8.html
每隔几周，当我在一个新网站上遇到这个问题时，我都会回来查看这篇文章。如果可以的话，每次都会投票......

【解决方案2】：

为ie8设置width:inherit

 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }

【讨论】：

我刚刚遇到了一个问题，即容器 div 中的图像带有“max-height:90%;”没有在 Internet Explorer（所有版本）中调整大小，直到说 div 也具有“height:inherit;”财产。

【解决方案3】：

哇，在那里为我节省了很多时间！

我在 position: absolute 的图像中遇到了类似的问题，其中宽度神奇地采用了最大宽度值。这很奇怪，因为当图像不在位置时它不会这样做：绝对。

width: auto; 
max-width: 200px; 
height: auto; 
max-height: 200px;

在 IE8 中运行良好！

【讨论】：

【解决方案4】：

哇，IE 似乎总是那么痛苦。虽然有一个公认的答案，但我发现它并没有解决我的问题。

经过大量搜索，我发现修复它的方法是从相关图像中删除高度和宽度属性。可以在这里找到解释：Scaling Images in IE8 with CSS max-width

代码如下：

CSS：

.entry img {
    max-width:615px
    height:auto;
}

脚本

var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
    w = imgs[i].getAttribute( 'width' );
    if ( 615 < w ) {
        imgs[i].removeAttribute( 'width' );
        imgs[i].removeAttribute( 'height' );
    }
}

现在我倾向于尽可能多地使用 jQuery，为了解决这个问题，我使用了一些不同的函数来针对 IE8 并让我的生活更轻松。我还发现该解决方案几乎奏效了，但并不完全奏效。我玩弄了它，直到我能够达到我想要的结果。我的解决方案如下：

JQUERY：

var maxWidth = 500;

function badBrowser(){
if($.browser.msie && parseInt($.browser.version) <= 8){
    return true;
}   
    return false;
}


if(badBrowser()){
    $('img').each(function(){
        var height = $(this).height();
        var width = $(this).width();
        if (width > maxWidth) {

            var ratio = (maxWidth /width)  
            $(this).css({
                "width":maxWidth,               
                "height":(ratio*height)
            });
            $(this).removeAttr('width'); 
            $(this).removeAttr('height');
        }else{
            $("#cropimage").css({
                "width":width,               
                "height":height
            });
        }
    });       
}

我使用它来定位特定的图像加载功能，但它也可以添加到任何文档就绪或窗口加载功能。

【讨论】：

【解决方案5】：

我对这个问题的解决方案是：

  <!--[if IE 8]>
  <style>
   a.link img{
          max-height:500px ;
          width:auto !important;
          max-width:400px;
          height:auto !important;
          width:1px; 

        }
  </style>
  <![endif]-->

【讨论】：

【解决方案6】：

当直接包装器（div）有宽度时，图像的最大宽度在 IE8 上可以正常工作。

示例：
本例中的图片为 700px；网页宽度为900px；

<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>

如果你的风格： .wrapper1 { width: 50%; float: left; } // 此列最大宽度为 450px；

图片仍然是 700px 并且布局被破坏了。

解决方案： .wrapper1 { width: 50%; float: left; } // 此列的最大宽度为 450px； .wrapper2 { width 100%; float: left; } // 如果有边框或内边距，宽度会缩小 100%

当窗口变小时，图像将适合列（图像 = 450px），图像会根据 wrapper2 的宽度变小。

问候，
强天

【讨论】：