更小<img>適用於Firefox v22.0，但不適用於IE v10.0.9

我在Firefox版本22中成功顯示一張照片 - 在兩個不同的img標籤中 - 其中一個img標籤沒有CSS寬度或高度設置，因此圖像將以其原始大小顯示。更小<img>適用於Firefox v22.0，但不適用於IE v10.0.9

第二個img標籤由CSS樣式設置爲60px×60px。

當我設置這兩個img標籤的'innerHTML'時，在Firefox中，我看到原始大小的圖像和相同的圖像縮小到適合60x60px img標籤。

在IE 10.0.9版本中，我根本沒有看到第二個img稅中的任何內容，通過CSS設置爲60px×60px。

這是執行完全相同的代碼。有什麼我需要做的IE瀏覽器顯示圖像在60px 60px img標籤，這是不存在我的代碼在這裏？

順便說，下面是在PHP文件生成的代碼 - I使用「隱藏的iframe」的方式來加載然後顯示在網頁上的圖像 - 下面的代碼是在PHP文件生成然後輸出你看到下面我隱藏的iframe我的HTML頁面，這就是爲什麼你在這裏看到的代碼獲取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版本的圖像 - 不知道爲什麼。

來源

2013-08-03 CFHcoder

它是Internet Explorer。忘掉它。 –

但它是Internet Explorer 10.它比邪惡的兄弟好得多。 – JiminP

你設置了一個圖像的'innerHTML'（不應該有這個屬性），試着設置wrapper的'innerHTML'代替 – AmazingDreams

您設置了圖像的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';

來源

2013-08-03 16:37:13 AmazingDreams

我改變了我的代碼爲60px的60px圖像使用你的第二個建議 - parDoc.getElementById（'60by60'）。src ='http // localhost/thesite/aPhoto.jpg \';並且可以在Firefox和IE中使用 - 謝謝。 – CFHcoder

更小<img>適用於Firefox v22.0，但不適用於IE v10.0.9

回答

相關問題