2012-02-24 90 views
0

我一直在争取这一段时间,无法弄清楚为什么我会在IE7中看到背景的一个像素(其他浏览器正常工作)。背景中的一个像素显示在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> 
+1

您没有关闭标签? – Christophe 2012-02-24 18:08:43

+0

非常感谢,这太愚蠢了,花了半天的时间试图找出答案! – 2012-02-24 18:09:45

+0

@Christophe:你应该做出答案! – Jawad 2012-02-24 18:14:08

回答

3

IE7对表格中空的<tr>元素感到困惑。你的意思是</tr>而不是<tr>,但你现在看到它的方式导致<tr>元素没有内容插入到表中。 IE7显然给出了空的<tr>元素高度为1个像素。

2

您havenot cloesd的<tr>元素。

使用验证察觉这些恼人的小失误:http://validator.w3.org/

编辑:正如在其他的答案我错了提到,收盘</tr>not requiered,至少在HTML4。它只是打开一个新的行。

3

虽然无论是</head></tr>需要,我必须指出的是,你应该尝试使用它们,特别是我可以看到你要使用</tr>而是再次使用<tr>

不要低估IE7的诡异,并使用所有结束标签。

+0

确实。但在这种情况下,问题不是由于没有使用''标签,而是由于现在在桌面上存在无内容的'tr'!即使您输入了所有结束标签,问题仍然存在。你可以自己测试一下,把''放在一张表中,看看IE7的行为与其他浏览器的关系。 – 2012-02-24 18:30:55