• 投稿者サムネイル画像 フロンティアビジョン
    • #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オンリーで表現する何かいいアイデアお持ちの方、教えてくださーい。