最近、表の行に繰り返しグラデーションを配置しようとしているときに、Chrome で奇妙な表示の問題を発見しました。
<table id="one">
<tr><td>123</td><td>asd</td><td>brgfbb</td><td>sdf</td><td>bgfb</td></tr>
</table>
#one tr{
background-image: repeating-linear-gradient(135deg,
#bada55, #bada55 5px,
transparent 5px, transparent 10px);
}
もちろん、そのようなグラデーションをtd
要素に配置しても機能しません。ただし、グラデーションの上にグラデーションを配置すると、グラデーションが str
上に配置されたかのように奇妙に乱れtd
ます。区切りは、表のセルが接触する場所です。代わりにグラデーションをテーブルに配置すると、ストライプのサイズが不規則になります。
クロム:
Firefox では、すべてが見栄えがします。
PS IE10 には、テーブル要素の直接のグラデーションで同じ問題があり、tr
すべて問題なく表示されます。
この問題の回避策を知っていますか?