Question

我有一个包含以下文字的HTML文件。

<div id="id1" style="max-height: 100px; min-width: 100px;">
    <div align ="center" id="id3">
        <div id="id2" style="height: 100px; max-width: 364px;">        
            <img src="http://www.file-extensions.org/imgs/articles/4/369/windows-10.png" height=100%; width=100%; />        
        </div>       
    </div>
</div>

当我打开Firefox，Chrome或IE 9或更高版本时，它会按预期显示。但是当我在IE8或更低版本中打开它时，它会完全拉伸到屏幕的宽度。如果我删除width=100%，那么它可以正常工作。

两个问题：

为什么它在最新的Firefox，Chrome版本和IE 9或更高版本中按预期工作？这是IE8中已知的错误/问题吗？如果是，那么它是什么？
如何修改IE8浏览器中的显示而不更改HTML本身，即我无法删除width=100%属性。

Answer 1

以下是基于您上述评论的简化解决方案

＆＃13;

div {
    min-width: 100px;
    display:block;
    margin:auto;
    max-width:364px;
}
img {
    height:auto;
    width:100%;
    display:block /*fix inline img gap*/
}

＆＃13;

<div id="id1">
    <img src="http://www.file-extensions.org/imgs/articles/4/369/windows-10.png" />
</div>

＆＃13;

为什么Internet Explorer会拉伸图像？

1 个答案: