较小的 <img> 适用于 Firefox v22.0，但不适用于 IE v10.0.9

Question

我在 Firefox 版本 22 中成功显示了一张照片——在两个不同的 img 标签中——其中一个 img 标签没有设置 CSS 宽度或高度，因此图像以其原始大小显示。

第二个 img 标签由 CSS 样式设置为 60px x 60px。

当我设置这两个 img 标签的 'innerHTML' 时，在 Firefox 中我看到原始大小的图像和相同的图像缩小以适合 60px x 60px img 标签。

在 IE 版本 10.0.9 中，我根本看不到通过 CSS 设置为 60px x 60px 的第二个 img tax 中的任何内容。

执行的代码完全相同。我需要为 IE 做些什么来在 60px x 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 x 60 版本的图像——不知道为什么。

Answer 1

您设置了图像的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';