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