输入表> td，但是行之间的额外底部间距！ IE浏览器 [英] input in table > td, But yet extra bottom spacing between rows! Internet Explorer

问题描述

使用 meyer css重设。但我有一个表中的输入问题。在行之间有额外的空格：

Im using meyer css reset. But I have problem with input in a table. There in extra space between rows:

<table class="table" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td>&nbsp;</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>

和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;
    }

为什么互联网浏览器中有额外的底部间距（我讨厌ie： ）？
感谢alot

Why there is extra bottom spacing in internet explorer (I hate ie :(()? Thanks alot

推荐答案

尝试在td而不是输入上做边框
给你的单元格你想黑色一个黑色的类，其他与输入tdinput类。这样，你仍然得到的数字无边框的细胞：）

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>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;
}

这篇关于输入表> td，但是行之间的额外底部间距！ IE浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！