0

我在 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 版本的图像——不知道为什么。

4

1 回答 1

4

你设置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 更改innerHTMLdiv 而不是图像。

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

或者改变src图像的属性。

parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';
于 2013-08-03T16:37:13.510 回答