Internet Explorer 未在网页上显示图像答案

【问题标题】：Internet Explorer Not Showing Images on WebpageInternet Explorer 未在网页上显示图像
【发布时间】：2013-11-09 08:42:29
【问题描述】：

我建立了一个在 firefox、chrome 和 safari 上运行的网站，但是当我在 Internet Explorer 中打开它时，什么都没有显示。我究竟做错了什么？这是几张不同的图片，但其中一张的标记如下：

<div id="thepic">
<img src="images/chairs.png" alt="" height="600px" width=""> <br />
</div><!-----------------CLOSES THE PIC------------>

#thepic{
float:left;
margin-top:190px;   
margin-left:-100px;
}

【问题讨论】：

这些信息不足以告诉您哪里出了问题。尽管<img alt="" />，您确实有无效的 HTML。

标签： css image internet-explorer

【解决方案1】：

IE 需要在 <img> 上定义 width，并且只需要整数。

<img src="images/chairs.png" alt="" height="600" width="600">

然后在你的 CSS 中：

#thepic{
 float:left;
 margin-top:190px;   
 margin-left:-100px;
}

#thepic img {
 height: 600px; /* force height to 600px */
 width: auto; /* auto calculates the width ratio using 600px height */
}

【讨论】：

你为什么要通过 HTML 标签和 CSS 给图像一个高度/宽度？
在 IE 浏览器的 HTML 标记中两者都是必需的。我认为 OP 想要将图像缩小到 600 像素的高度和相应的宽度（不以数字方式定义宽度）。 CSS 允许我们这样做并覆盖 HTML 中的宽度值。
我已经在 IE10 中尝试过使用图像，我只设置图像的高度属性（因此没有 CSS 和宽度），它仍然有效......
哦，抱歉，是的 - 我说的是旧 IE 中的 XHTML（比如 7...8..）