IE8+table+border+filter
- フロンティアビジョン
-
- #HTML・CSS
- #ホームページ全般
こんにちは。
迫です。
この時期はクリスマス、正月などイベントが盛りだくさんで
必然的にデザインもクリスマスや正月バージョンを作ることが多くなり
ネタ切れに悩まされます。。。
さて、今回はCSS3ネタです。
CSS3でグラデーションを使うことも多いですが、IE用のfilterを用いた場合
IE8でborderが正しくレンダリングされずに悩んでます。
回避策を調べてもなかなか出てきません。
HTMLサンプルコード
<table>
<tr>
<td>サンプル</td>
<td>さんぷる</td>
</tr>
</table>
CSSサンプルコード(省略)
table{
margin:0;
padding:0;
border-collapse:collapse;
}
td{
border:1px solid #333333;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC');
}
IE6,7はいけるのに、IE8だけうまく行かない。
ハックでもなかなかいい書き方が思いつかない。
CSSでborderの表現を止めてHTML側で表現すれば、かなり改善はされますが、
CSSオンリーで表現する何かいいアイデアお持ちの方、教えてくださーい。