Question

我有一张带有tr和两个tds的桌子。第一个td包含输入（文本），第二个包含输入（图像）。第二个输入应该是一个按钮。我已将cellpadding和cellspacing设置为零，以便可以附加文本输入和图像按钮，中间没有空格。这适用于IE和Firefox，但不适用于Chrome。 Chrome会在文本输入和按钮之间留下几个像素的空间。我尝试使用CSS，但似乎没有任何工作。知道Chrome的问题可能是什么吗？

<head>
<style type="text/css"> 
.search{ 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    color: #4D4D4D; 
    border: 1px solid #CCCCCC; 
    height: 21px; 
    outline: none; 
} 
</style> 
</head> 
<body> 
    <table cellpadding="0" cellspacing="0"> 
        <form method="post"> 
            <tr><td><input type="text" size="30" class="search"></td> 
            <td><input type="image" src="button.gif" name="submit" id="submit" width="77px" height="21px"></td></tr> 
        </form> 
    </table> 
</body>

Answer 1

首先，您需要将<form>标记移到<table>之外，这样会给您带来麻烦。

接下来，您需要将td s上的填充设置为0：

form td {
    padding: 0;
}

那应该摆脱你所看到的任何额外间距。

Answer 2

stackoverflow用户said：

只是提及cellpadding和cellspacing已经过时了，当Chrome Chrome 23不支持时我感到震惊。

无论如何，我在互联网上找不到任何参考资料！

Answer 3

根据您的需要，通过css在表格中尝试border-collapse: collapse。

此外，您可能希望了解其他方法，因为使用table进行布局并不是现在的发展方向，听起来就像您正在做的那样。

谷歌浏览器似乎忽略了cellpadding + cellspacing

3 个答案: