HTMLと

Question

の背景画像のレンダリングの違いを持つのHTML私は以下のようにHTMLでコード化されたテーブルを持っています。

<table border="1" class="tableBasic"> 
<thead> 
    <tr> 
     <th rowspan="2">Head Row 1</th> 
     <th rowspan="2">Head Row 1</th> 
     <th rowspan="2">Head Row 1</th> 
     <th colspan="4">Head Row 1</th> 
    </tr> 
    <tr> 
     <th>Head Row 2</th> 
     <th>Head Row 2</th> 
     <th>Head Row 2</th> 
     <th>Head Row 2</th> 
    </tr> 

</thead> 
</table> 

これは2行にまたがる表のヘッダーです。

.tableBasic thead{ 
    background: url("/images/tbl_header.png") repeat-x scroll 0 0 transparent; 
} 

IEとFirefoxの背景画像にレンダリングの違いはありますか？

IEが2行（すなわち、2行の高さに等しい）にまたがるように、背景画像を示しているが、Firefoxはちょうど最初の行のためにそれを示している（と2行のバックグラウンドを示していない）

背景画像であります2行の高さに及ぶのに十分な高さ。 残念ながら、私はHTMLコードを変更することができず、CSSからのみこれを制御することができます。

CSSでこの問題を解決するにはどうすればよいですか？

IE

Firefoxの

Answer 1

私は、Firefoxはあなたが言ったことをやっていると思うが、Firefoxがやっていることですので、あなたは、thead要素と繰り返しのみXの背景を宣言しました。 IEは見た目が良くなっていますが、あなたのCSS宣言には従っていません。あなたは別の小さな問題、つまりいくつかのセルが他のものよりも背が高く、1つのイメージがそれをしないという事実を持っているので、私はあなたのCSSをth要素で代わりに狙うべきだと思います。

おそらく

このような何か：あなたはCOLSPANまたはROWSPAN属性に応じて適切な背景画像を定義することができhttp://jsfiddle.net/JQK2A/1/

。

CSS

.tableBasic thead th { 
    background: green url(background.jpg); 
} 

.tableBasic thead th[rowspan] { 
    background: red url(background2.jpg); 
} 

.tableBasic thead th[colspan] { 
    background: blue url(background3.jpg); 
} 

コメントの後UPDATE：

あなたはCSS 3を使用してOKであれば、あなたは（ちょうど1背景画像を使用して）これを試みることができる：

.tableBasic thead th { 
    background: url(background.jpg); 
    background-size: 100% 100%; /* CSS 3 */ 
}