圖片寬度在IE中不合適

在我的html表格中顯示一條紅線。在Firefox中，我正確地獲得了該行。但在IE中，這條線的高度已經增加了。在下面的圖片中顯示。圖片寬度在IE中不合適

<table width="100%" align="center" border="0" cellSpacing="0" cellPadding="0" summary=""> 
<tr> 
<TD style="BACKGROUND-COLOR: red"><IMG alt="" src="myImage.gif" width=1 height=1> 
</TD> 
</tr> 
</table>

在Firefox：

enter image description here

在IE中： enter image description here

這究竟是爲什麼或如何能解決這個問題。

來源

2013-05-14 NaaN

嘗試'TD {邊界崩潰：崩潰}' – Morpheus 2013-05-14 08:47:11

我錯過了什麼？ – George 2013-05-14 08:55:42

嘗試使用.png而不是.gif .gif文件的大小有時會導致瀏覽器無法加載圖像。 – 2013-05-14 09:24:30

我認爲這是更好地應用CSS樣式邊框底：1px的固體爲此行。

<table style="width: 100%; text-align: center;" cellSpacing="0" cellPadding="0"> 
    <tr> 
     <td>some column</td> 
    </tr> 
    <tr> 
     <td style="height: 1px; line-height: 1px; border-bottom: 1px solid red; background: transparent;"><!-- border --></td> 
    </tr> 
</table>

活生生的例子：http://jsfiddle.net/6jVvQ/6/

來源

2013-05-14 09:18:29

添加這個樣式應用到錶行：

<tr style="height:1px; font-size:1px; line-height:1px;"> 
    <TD style="BACKGROUND-COLOR: red"><IMG alt="" src="myImage.gif" width=1 height=1> 
    </TD> 
</tr>

這並不是鼓勵內聯樣式雖然。使用外部樣式表！

看看這個DEMO

來源

2013-05-14 08:46:39 George

試試這個

<table width="100%" align="center" border="0" cellSpacing="0" cellPadding="0" summary=""> 
    <tr> 
     <td style="height:1px; line-height:1px; background-color: red"> 
      <img alt="" src="myImage.gif" width="1px" height="1px" /> 
     </td> 
    </tr> 
</table>

來源

2013-05-14 08:51:15

我提出一個不同的解決方案。您不必爲此任務使用表格。您可能需要使用div或hr

這是更少的代碼，更容易：example

表考慮棄用（與他們的造型佈局時），你也應該避免內聯樣式，你可以儘可能多的。如果您正在使用表反正嘗試他們的風格是這樣的：

<table class="clean-table"> 
... 
</table>

而CSS：

.clean-table{ 
    width: 100%; 
    border-spacing: 0px; 
    padding: 0px; 
    margin: 0px; 
    text-align: center; 
}

來源

2013-05-14 09:13:33

圖片寬度在IE中不合適

回答

相關問題