IE7 表格中显示 1 个像素的背景
我已经为此奋斗了一段时间，不明白为什么我会在 IE7 中看到一个背景像素（其他浏览器工作正常）。
这是一个简单的例子，在 IE7 中尝试一下：
jsfiddle 链接： http://jsfiddle.net/PstEk/
<html>
<head>
<style>
.test {
border-width: 0px;
border-spacing: 0px;
border-style: outset;
border-color: red;
border-collapse: collapse;
background-color: blue;
}
.test th{
border-width: 0px;
padding: 0px;
border-style: none;
border-color: red;
background-color: #fff5ee;
}
.test td {
border-width: 0px;
padding: 0px;
border-style: none;
border-color: red;
background-color: #e1edf3;
}
</style>
<body>
<table class="test">
<tr>
<th>Test test</th>
<th>Test test</th>
<th>Test test</th>
<th>Test test</th>
<tr>
<tr>
<td>Test test</td>
<td>Test test</td>
<td>Test test</td>
<td >Test test </td>
<tr>
<tr>
<td>Test test</td>
<td>Test test</td>
<td>Test test</td>
<td>Test test</td>
<tr>
</table>
</body>
</html>
I have been fighting this for a while, can't figure out why do I see one pixel of background show up in IE7 (other browsers work fine).
Here is a simple example, try it in IE7:
link to jsfiddle: http://jsfiddle.net/PstEk/
<html>
<head>
<style>
.test {
border-width: 0px;
border-spacing: 0px;
border-style: outset;
border-color: red;
border-collapse: collapse;
background-color: blue;
}
.test th{
border-width: 0px;
padding: 0px;
border-style: none;
border-color: red;
background-color: #fff5ee;
}
.test td {
border-width: 0px;
padding: 0px;
border-style: none;
border-color: red;
background-color: #e1edf3;
}
</style>
<body>
<table class="test">
<tr>
<th>Test test</th>
<th>Test test</th>
<th>Test test</th>
<th>Test test</th>
<tr>
<tr>
<td>Test test</td>
<td>Test test</td>
<td>Test test</td>
<td >Test test </td>
<tr>
<tr>
<td>Test test</td>
<td>Test test</td>
<td>Test test</td>
<td>Test test</td>
<tr>
</table>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
IE7 会对表格中的空
元素感到困惑。您的意思是而不是，但您现在的理解方式会导致元素没有内容要插入到表中。 IE7 显然为空元素提供了 1 像素的高度。IE7 gets confused by the empty
<tr>elements in your table. You meant</tr>instead of<tr>, but the way you're witten it now causes<tr>elements with no content to be inserted in the table. IE7 apparently gives empty<tr>elements a height of 1 pixel.虽然
或都不是必需的，但我必须指出您应该尝试使用它们，特别是因为我可以看到您尝试使用但再次使用。不要低估 IE7 的古怪之处并使用所有结束标签。
While neither the
</head>or the</tr>are required, I must point out that you should try using them, especially as I can see you are trying to use</tr>but instead are using<tr>again.Do not underestimate the quirkiness of IE7 and use all closing tags.
您尚未关闭
元素。使用验证器来发现这些恼人的小错误： http://validator.w3.org/
编辑：如上所述在其他答案中我错了，结束
是 不需要，至少在 HTML4 中是这样。它只是打开一个新行。You havenot cloesd the
<tr>elements.Use a validator to spot these small annoying mistakes: http://validator.w3.org/
Edit: As mentioned in the other answers I was wrong, the closing
</tr>is not requiered, at least in HTML4. It just opens a new row.