Html 在表中输入> td，但行之间还有额外的底部间距！IE浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3018484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input in table > td, But yet extra bottom spacing between rows! Internet Explorer
提问by TheNone
Im using meyer css reset. But I have problem with input in a table. There in extra space between rows:
我正在使用meyer css reset。但是我在表格中输入有问题。行之间有额外的空间：
<table class="table" cellpadding="0" cellspacing="0" border="0">
<tr>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text" class="black"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" /></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text" class="black"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
and css:
和CSS：
.table {
border-collapse: collapse;
border-spacing: 0px;
}
.table tr {
margin-bottom:0;
overflow:hidden;
height:25px;
width: 100%;
padding:0;
}
.table input {
width:25px;
height:25px;
border:1px solid #000;
text-align:center;
}
.black {
background:#000;
}
Why there is extra bottom spacing in internet explorer (I hate ie :(()? Thanks alot
为什么在 Internet Explorer 中有额外的底部间距（我讨厌 ie :(()？非常感谢
回答by Mark Schultheiss
Try making the border on the td and not on the input. Give the cells you want black a black class and the others with input the tdinput class. That way, you still get the cells with numbers without borders :)
尝试在 td 上而不是在输入上制作边框。给你想要黑色的单元格一个黑色类，其他输入 tdinput 类。这样，您仍然可以得到带有无边框数字的单元格 :)
<td>1</td>
<td class='tdinput'><input type="text"/></td>
<td class='tdinput black'><input type="text" /></td>
td.tdinput
{
border:1px solid #000;
}
td.tdinput.black input
{
background:#000;
}
回答by edl
It's because inputs are inline elements. add display:block;to your input elements and it should take off the gap.
这是因为输入是内联元素。添加display:block;到您的输入元素，它应该消除差距。
.table {
border-collapse: collapse;
border-spacing: 0px;
}
.table tr {
margin-bottom:0;
overflow:hidden;
height:25px;
width: 100%;
padding:0;
}
.table tr td {
border:1px solid #000;
}
.table input {
width:25px;
height:25px;
border:none;
text-align:center;
display:block;
}
.black {
background:#000;
}
Basically adding display:block;to Catfish's solution as he also makes a valid point about styling both td and input. :)
基本上添加display:block;到 Catfish 的解决方案中，因为他还提出了关于 td 和 input 样式的有效观点。:)
回答by Catfish
You have to take the border off of the .inputs and actually put it on the td's.
你必须把 .inputs 的边框去掉，然后把它放在 td 上。
Try this
尝试这个
.table {
border-collapse: collapse;
border-spacing: 0px;
}
.table tr {
margin-bottom:0;
overflow:hidden;
height:25px;
width: 100%;
padding:0;
}
.table tr td {
border:1px solid #000;
}
.table input {
width:25px;
height:25px;
border:none;
text-align:center;
}
.black {
background:#000;
}
回答by Jamie Dixon
The bottom margin is being caused by the way IE is handling your input.
底部边距是由 IE 处理输入的方式引起的。
Adding: margin:-1px;such that:
添加： margin:-1px;这样：
.table input {
width:25px;
height:25px;
border:1px solid #000;
text-align:center;
margin:-1px;
}
Seems to fix it quite well.
似乎修复得很好。
