圖片正常顯示在鉻但不是在Firefox或IE

因此，一個html.erb文檔中我有一個表，在它和在該表是縮放到所述柱的尺寸，像這樣的圖像：圖片正常顯示在鉻但不是在Firefox或IE

<table width="900" border="0" align="center" valign="top"> 
     <tr> 
     <td><img src="someimage.gif" width="35%" height="95%" /></td> 
     <td>a whole bunch more html content here</td> 
     </tr> 
    </table>

它可以在Chrome中正常工作，但由於某些原因，當我在IE或Fire Fox中加載頁面時，它會以原始大小顯示圖像，而不是縮放到應該顯示的列大小。我試圖消除身高和體重的屬性，而不是一些代替它們符合CSS是這樣的：

<img src="someimage.gif" style="height:95%;width:35%"/>

，但我又遇到了同樣的問題。在Chrome中運行良好，但在其他兩個中運行得不錯。是否有人知道可能會導致兼容性問題的原因以及我可以如何解決或解決該問題？

編輯：我可能應該提到我試圖在外部CSS文件中使用絕對和相對作爲參數定義圖像的大小，然後是大小的像素值，然後在刪除CSS代碼，在HTML5 img標籤的高度和寬度部分。在這兩種情況下，放大任何瀏覽器都會使網站的整體外觀變得糟糕，這就是爲什麼我改用百分比值。

來源

2012-01-27 Lee Abraham

你在'heigh =「95％」'中缺少't';你確定這不是問題的原因嗎？ – 2012-01-30 10:02:06

這是這篇文章中的一個錯字。它不是實際代碼中的問題。感謝您指出這一點，但我需要在發佈前學會閱讀。 – 2012-01-30 14:12:08

瀏覽器無法確定列的寬度，直到它確定其內容的寬度。在你的情況下，內容的寬度取決於列的寬度。取決於瀏覽器並取決於圖像是否存在於緩存中，您會得到意想不到的結果。

指定列的寬度和高度，您將得到預期的一致結果。 See demo here。

來源

2012-01-30 09:18:06

爲Firefox，你可以嘗試例如

<td> 
    <div style="background: url(someimage.gif); background-size: 100% 100%; width: 35%; height: 95%;"> 
    </div> 
</td>

CSS背景大小或者你可以嘗試jQuery的，但你的HTML必須看起來像這樣

<table width="900" border="0" align="center" valign="top"> 
    <tr class="image_tr"> 
    <td class="image_td"><img class="image" src="someimage.gif"/></td> 
    <td>a whole bunch more html content here</td> 
    </tr> 
</table>

現在這裏是jQuery的

$(document).ready(function(){ 
    var height_percent = $("table .image_tr").height()/100; 
    var width_percent = $("table .image_td").width()/100; 

    $(".image").height(height_percent * 95); 
    $(".image").width(width_percent * 35) 
});

來源

2012-01-27 23:10:09 theliberalsurfer

' 。。。。。 .' 與之前相同的問題。適用於Chrome，不適用於FireFox或Internet Explorer。我確實有一個外部CSS文件。我會嘗試通過它來操縱圖像。 – 2012-01-27 23:22:51

您也可以替換img標籤並將其替換爲div的寬度。現在看看我的帖子。 – theliberalsurfer 2012-01-27 23:41:26

你應該嘗試定義表格中td的寬度，我發現它們經常在Internet Explorer中搞亂:)

來源

2012-01-28 00:39:10

所有瀏覽器都會縮放圖像，但結果不同，因爲單元格大小不同。如果將border="0"更改爲border="1"，則可以看到此內容。不同的瀏覽器將不同的列寬分配算法應用於表格，特別是在這種棘手的情況下。您要求將圖像縮放到可用寬度的35％，基本上是單元格寬度，而單元格寬度又取決於單元格的內容等等。類似的考慮適用於身高。

要解決此問題，您需要指定所需的外觀，而不依賴於特定瀏覽器的特定表格格式化算法。

來源

2012-01-28 06:20:38

圖片正常顯示在鉻但不是在Firefox或IE

回答

相關問題