2

最近、表の行に繰り返しグラデーションを配置しようとしているときに、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ます。区切りは、表のセルが接触する場所です。代わりにグラデーションをテーブルに配置すると、ストライプのサイズが不規則になります。

クロム:

Chrome 線形グラデーションのバグ

Firefox では、すべてが見栄えがします。

Firefox グラデーション

PS IE10 には、テーブル要素の直接のグラデーションで同じ問題があり、trすべて問題なく表示されます。

この問題の回避策を知っていますか?

4

1 に答える 1