php - 较小的 适用于 Firefox v22.0，但不适用于 IE v10.0.9

Question

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

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

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

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

这与正在执行的代码完全相同。我需要做些什么才能让 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。

您可以通过向父 div 添加 id="60by60" 属性来解决此问题，然后将其从 img 中删除。让 javascript 更改 div 的 innerHTML 而不是图像。

<div id="60by60">
     <img class="60by60Image" src="">
</div>

或者更改图像的src属性。

parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';