input> table> td，但行間的額外底部間距！ Internet Explorer

Im使用meyer css reset。但我在表格中輸入有問題。有行之間的額外空間：和cssinput> table> td，但行間的額外底部間距！ Internet Explorer

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

：

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

爲什麼會出現在Internet Explorer中的額外底間距（我恨即：（（）非常感謝

來源

2010-06-10 TheNone

哪裏？看起來很酷我：http://jsfiddle.net/Buc2D/ – 2010-06-10 21:05:07

在ie中看起來很可怕：http://jsfiddle.net/uRv5a/1/ – TheNone 2010-06-10 21:09:08

嘗試在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; 
}

來源

2010-06-10 21:59:04

非常感謝，這是非常酷的解決方案，我的問題是由此解決（但額外的100班） – TheNone 2010-06-10 22:12:53

是的，額外的類，但你可以避免與一些創新的JavaScript而不是（或jQuery的選擇器/操縱） – 2010-06-11 19:08:09

你是對的，thansk很多分享你的經驗。 – TheNone 2010-06-12 09:48:57

你必須從輸入中取出邊框並將其放在td上。

試試這個

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

來源

2010-06-10 21:22:03 Catfish

我已經嘗試TD邊框，但它看起來像這樣在ie http：///jsfiddle.net/uRv5a/42/ – TheNone 2010-06-10 21:33:36

底部邊距是由IE處理輸入的方式引起的。

添加：margin:-1px;這樣的：

.table input { 
width:25px; 
height:25px; 
border:1px solid #000; 
text-align:center; 
margin:-1px; 
    }

似乎解決它相當不錯。

來源

2010-06-10 21:23:20

但不是在Firefox中:( – TheNone 2010-06-10 21:34:02

把它放在你單獨的IE樣式表:-) – 2010-06-10 21:38:32

edl的答案是一個更好的答案infact。 – 2010-06-10 21:40:01

這是因爲輸入是內聯元素。將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; 
}

基本上增加display:block;鮎魚的解決方案，他也使有關造型既TD和輸入一個有效點。 :)

來源

2010-06-10 21:36:54 edl

與顯示：塊還有差距:( – TheNone 2010-06-10 21:42:06

input> table> td，但行間的額外底部間距！ Internet Explorer

回答

相關問題