与 IE8+ 和 FireFox 相比,IE7 似乎为选择框添加了内部填充。
fiddle :http://jsfiddle.net/R4KhQ/7/
在 Firefox 中,所有表格行都显示在固定高度的 div 中。 div 上没有滚动条。 在 IE7 中,选择元素更大,因此将一些表格行推离了 div 的底部。然后出现滚动条。
如何标准化选择框的样式,使高度在跨浏览器时保持相同而不切断文本?
HTML
<div id="container">
<table>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
<tr>
<td>column1</td>
<td>column2</td>
<td>
<select>
<option>An Option</option>
<option>Another Option</option>
<option>Yet Another Option</option>
</select>
</td>
</tr>
(重复 tr 行)
</table>
</div>
CSS
#container {
border: 1px solid black;
width: 500px;
height: 330px;
overflow: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th{
font-weight: bold;
}
最佳答案
你,我的 friend ,错过了 reset.css 的荣耀。拥抱自己
http://www.cssreset.com/?utm_expid=37596592-1
编辑:没有解决方法。
Edit2:更多讨论在这里 - Setting the height of a SELECT in IE
关于css - IE7 选择框比其他浏览器大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13401918/