我在Firefox版本22中成功地显示了一张照片——在两个不同的img标签中——其中一个img标签没有设置CSS宽度或高度，因此图像显示为原始大小。
第二个img标记由CSS样式设置为60px乘60px。
当我设置这两个img标记的"innerHTML"时，在Firefox中，我看到原始大小的图像和相同的图像缩小到60px乘60px的img标记中。
在IE 10.0.9版本中，我在第二个img税中没有看到任何通过CSS设置为60px乘60px的内容。
它与正在执行的代码完全相同。我需要为IE做些什么来显示我代码中没有的60px乘60px img标记中的图像吗？
顺便说一句，下面的代码是在一个PHP文件中生成的——我使用"隐藏Iframe"方法加载，然后在网页上显示图像——下面的代码在一个PHP文件中生成，然后将您看到的内容输出到我的html页面上的隐藏Iframe，这就是为什么您看到这里的代码获得Iframe的父文档：
<script language="JavaScript" type="text/javascript">
var parDoc = parent.document;
parDoc.getElementById('justOpenedImage').innerHTML =
'<div><img src=''http://localhost/thesite/aPhoto.jpg'' /></div>';
parDoc.getElementById('60by60').innerHTML =
'<div><img class="60by60Image" src=''http://localhost/thesite/aPhoto.jpg'' /></div>';
</script>
这是CSS类60by60Image:
.60by60Image
{
border: 2px solid green;
width: 60px;
height: 60px;
display: inline-block;
}
这是页面上的html：
<!-- THE ORIGINAL-SIZED IMAGE APPEARS FINE HERE IN BOTH IE AND FF -->
<div id="justOpenedImage"></div>
<!-- THE SMALLER IMAGE APPEARS HERE IN FIREFOX BUT NOT IN IE -->
<div>
<img class="60by60Image" id="60by60" src="" />
</div>
这在Firefox中运行得很好，但在IE中，它无法显示较小的60乘60版本的图像——不知道为什么。
您设置了图像的innerHTML。执行完脚本后，文档树看起来像这样：
<div>
<img class="60by60Image" id="60by60" src="">
<div><img class="60by60Image" src='http://localhost/thesite/aPhoto.jpg' /></div>
</img>
</div>
我认为IE就是不能"处理"这个问题。至少，它不是有效的HTML。
可以通过将id="60by60"属性添加到父div并将其从img中删除来修复此问题。让javascript更改div的innerHTML，而不是图像。
<div id="60by60">
<img class="60by60Image" src="">
</div>
或者更改图像的src属性。
parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';