2012-02-24 28 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