1

誰でもこの問題を解決するのを手伝ってくれますか? このソリューションは IE 8 では機能しません。

簡単に言えば、表の行に背景画像を適用すると、背景が内側のセルに適用されます。

4

4 に答える 4

2

IE8 (Safari と Chrome も) で機能するテーブル行の背景画像を取得するには、テーブル行ではなく行のテーブル セルに背景画像を適用する必要があります。

したがって、たとえば、次の表を使用します。

<table>
  <tr>
    <td class="cellFirst">First cell</td>
    <td class="cellMiddle">Middle cell</td>
    <td class="cellMiddle">Middle cell</td>
    <td class="cellLast">Last cell</td>
  </tr>
</table>

そして、次の CSS を適用します。

td.cellFirst {
  background: url('my-image.png') 0 0 no-repeat;
}

td.cellMiddle {
  background: url('my-image.png') 50% 0 no-repeat;
}

td.cellLast {
  background: url('my-image.png') 100% 0 no-repeat;
}

背景画像付きの「行」が表示されます。行の背景である my-image.png は、各セルで使用されます。

唯一異なるのは、画像の背景位置を変更することです。明らかに、最初のセルは左から開始するため、0 です。中央のセルでは、画像は 50% に配置されます。これにより、画像の左端が非表示になります。最後に、最後のセルの画像を 100% に配置し、画像の右端から開始します。

ほら、背景画像が一列に並んでいます。

于 2010-03-08T18:52:19.663 に答える
1

はるかに優れた解決策は、次のことを行うことです: position:relativeTR に追加しbackground-image:none、TD に を設定します。

報告によると、Mac Safari を除くすべてで動作します。これを補うには、ブロックをブロックでラップし、TRブロックに背景TBODYを与えます;)TBODY

そうそう！

于 2010-11-22T02:16:56.660 に答える
0

その tr 内の td に「background-image:none」を追加します。

于 2009-09-28T02:45:28.720 に答える
0

バックグラウンド位置を持つテーブルに「行」画像を割り当てることは、列のサイズが等しいことに依存していますか? 画像のサイズが行全体を占めていない場合はどうなりますか? FF で期待どおりに動作する次の CSS があります。

tr.selected { background: #0842C4 url(/my/background/image) repeat-y top right; }

画像はグラデーションで、色は から始まり#0842C4ます。

作業をさらに困難にするために、HTML は JavaScript によって作成されたポップアップ メニューであり、私は制御できないため、テーブルを変更することはできません。

于 2011-05-03T16:30:35.123 に答える