HTML/CSS問題

Question

我曾在一個網站一個表中的一個虛擬主機上，它看起來很好，現在我移動到另一個主機和表搞砸了

HTML：

<div class="right"> 
<table> 
<tbody> 
<tr> 
    <tdcolspan="3"> 
     <img alt="" src="../App_Themes/image1.png"> 
    </td> 
</tr> 
<tr> 
    <td> 
     <img alt="" src="../App_Themes/image2.png"> 
    </td> 
    <td> 
     <iframe class="iframe" scrolling="no" frameborder="0" allowtransparency="yes" src="site.com"> 
     Your browser does not support iframes 
     </iframe> 
    </td> 
    <td> 
     <img alt="" src="../App_Themes/image3.png"> 
    </td> 
</tr> 
<tr> 
    <td colspan="3"> 
     <img alt="" src="../App_Themes/image4.png"> 
    </td> 
</tr> 
</tbody> 
</table> 
</div> 

發生了什麼事是，有各行之間的（約）2px的差距，我不明白爲什麼，我用下面的CSS嘗試，但沒有運氣：

.right tr td {padding: 0; margin:0px;} 
.right tr {border-spacing: 0px; padding:0px; margin:0px;} 

的圖像形成圍繞iframe的邊框和圖像1 2px以上2和3，圖像4 2px的下面的圖片2和3

如何能簡單的東西像這樣的突破，只是因爲我移動到另一臺主機？

Answer 1

嘗試增加給你的CSS：

table { border-collapse: collapse; } 

Answer 2

可能是你從Windows機器去的Linux機器還是正相反和不同的行結束導致不同的行爲。

Windows使用CRLF和Linux使用LF我想。

可能的解決方案 - 轉換行結束在一個良好的文本編輯器來匹配服務器平臺，否則，刪除所有的TR標記之間的換行/空格來檢查，如果這是造成問題。

Answer 3

我不知道切換主機如何改變什麼，但我想我能解決你的問題。

首先，固定<tdcolspan="3">到<td colspan="3">。這不是原因，但也不好。

嘗試加入這個CSS：

table img { 
    display: block 
} 

或者這樣：

table img { 
    vertical-align: top 
} 

我認爲你面臨着同樣的問題，因爲這些問題：

• CSS problem - gaps between divs
• Why does Opera 9 have a space between these two images?
• html5 vertical spacing issue with <img>

看到這裏提供了在這個問題上擴展的詳細文檔：

• https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps