2 
table 
{
    margin: 0 auto;
    border-collapse: collapse;
}

thead 
{
    background: url('../images/theadimage.png') 365px bottom no-repeat;
}

tbody 
{
    background: url('../images/tbodyimage.png') 365px top repeat-y;
}

tfoot 
{
    background: url('../images/tfootimage1.png') 365px top no-repeat, url('../images/tfootimage2.png') 0px -8px repeat-x;
}

これは、クロムを除くすべてのブラウザで正しく配置された画像を表示しています（奇妙なことに）。tbodyをrepeat-xに変更すると画像が表示されますが、no-repeatまたはrepeat-yに設定すると、背景画像が完全に消えます。

ここで何が欠けていますか？Chromeの解決策または回避策はありますか？

4

2 に答える 2

2

さらに検索したところ、これはChromeの既知の問題であり、他のすべてのブラウザで適切なレンダリングを維持しながら機能する回避策はtd、th要素をインラインブロックとしてレンダリングし、要素をブロックとしてレンダリングすることでしたtr。元の質問で言及されたものに次のCSSを追加することは、私にとって有効な解決策でした。

table.problemTable tr {
    display: block;
}
table.problemTable td, table.problemTable th {
    display: inline-block;
}
于 2012-07-22T17:55:49.137 に答える
1

これが解決策です。tfoot{}ではなくtfoottr{}でスタイルを指定する必要があります。同じ方法がすべてに適用されます。

CSS

tfoot{ background: url(tfoot.gif) no-repeat; width: 604px !important; // 604 is width of table}
tr {background: #e0e0e0;}
tfoot tr {background: url(tfoot.gif) no-repeat; width: 604px; display: table;}

HTML：

<table><thead><tr><th>Header 1</th></tr></thead>
<tbody><tr><td>Body cell</td></tr></tbody>
<tfoot><tr><td>Footer Cell </tr></tfoot></table>

これがお役に立てば幸いです...

于 2012-07-14T06:50:36.470 に答える