2012-02-24 10 views
0

私はこれをしばらく戦っていますが、なぜIE7で背景の1ピクセルが表示されるのか分かりません(他のブラウザはうまく動作します)。ここで背景の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> 
+1

あなたはヘッドタグを閉じていませんか? – Christophe

+0

ありがとう、そんなに馬鹿だった、半日かけてそれを理解しようと過ごした! –

+0

@Christophe:あなたはそれを答えるべきです! – Jawad

答えて

3

IE7はテーブルの空の<tr>要素で混乱します。あなたは<tr>の代わりに</tr>を意味しましたが、あなたが今見ているように、内容が全くない要素がテーブルに挿入されるのは<tr>です。 IE7は明らかに空の<tr>要素に1ピクセルの高さを与えます。

2

あなたは<tr>要素をcloesd havenot。

これらの小さな迷惑なミスを発見するバリデータを使用します。http://validator.w3.org/

編集を:私が間違っていた他の回答で述べたように、クロージング</tr>は、少なくともHTML4で、not requieredあります。それはちょうど新しい行を開きます。

3

どちら</head>または</tr>が必要とされていますが、私はあなたが</tr>を使用しようとしているが、代わりに再び<tr>を使用している見ることができ、特にとして、あなたがそれらを使用してみなければならないことを指摘しなければなりません。

IE7の奇妙さを過小評価して、すべての終了タグを使用しないでください。

+0

確かに。しかし、この場合、問題は ''タグを使用しないことによって引き起こされるのではなく、テーブルに内容がない 'tr'があるという事実によって引き起こされます!すべての終了タグを入力しても問題はあります。 ''を表に入れ、IE7が他のブラウザとどのようにふるまうかを見て、これを自分でテストすることができます。 –

関連する問題