2008年04月21日 01:21
ブラウザのレンダリングエンジンの違いによって、同じCSSでも微妙に表示に差が生じるというのは良くあることですが、個人的に気になったborder-styleのブラウザ間の違いをまとめてみました。
クリックで元サイズ表示。
メインマシンがWindows2000なので、XP以上にしか対応していないInternetExplorer7やらSafari(Windows版)やらは今回は除外しています。スクリーンショット撮影サービス使えばメインマシン上でも撮影できますが、簡単に言うと面倒だったので…。
比較的よく使われる値は「solid」「dashed」「dotted」でしょうか。「solid」に大した差が無いのは当たり前として、「dashed」はブラウザ間の差はほぼ無し。「dotted」はブラウザ間の表示の差が大きいようです。
InternetExplorer6では「dotted」は「dashed」とほぼ同じ表示になってしまっている（これはおそらくborder-widthが1pxの場合）ほか、Firefox・Opera間でもドットの間隔にわずかながら差が生じています。
ほんの些細な差とも言えますが、こだわる人にとっては少し面倒な問題ですね。
最近はボーダーに1ピクセルごとにドットが打たれた点線（
)を使いたいがために、border-styleプロパティでの指定ではなく、backgroundで背景にボーダーの画像を指定するようになりました。ただこれだと要素の四方のうちの一方のみにしかボーダーを指定できないというどうしようもない弱点もあり、最終的にborderプロパティも使うことに。そうすると最初からborderプロパティで全部指定した方が良いんじゃないかと思ってしまいます。うーん。
結論：気にしないのが一番。
追記部分にはテストに用いたHTMLを載せておきますね(*'-')ノ。
クリックで元サイズ表示。
メインマシンがWindows2000なので、XP以上にしか対応していないInternetExplorer7やらSafari(Windows版)やらは今回は除外しています。スクリーンショット撮影サービス使えばメインマシン上でも撮影できますが、簡単に言うと面倒だったので…。
比較的よく使われる値は「solid」「dashed」「dotted」でしょうか。「solid」に大した差が無いのは当たり前として、「dashed」はブラウザ間の差はほぼ無し。「dotted」はブラウザ間の表示の差が大きいようです。
InternetExplorer6では「dotted」は「dashed」とほぼ同じ表示になってしまっている（これはおそらくborder-widthが1pxの場合）ほか、Firefox・Opera間でもドットの間隔にわずかながら差が生じています。
ほんの些細な差とも言えますが、こだわる人にとっては少し面倒な問題ですね。
最近はボーダーに1ピクセルごとにドットが打たれた点線（
)を使いたいがために、border-styleプロパティでの指定ではなく、backgroundで背景にボーダーの画像を指定するようになりました。ただこれだと要素の四方のうちの一方のみにしかボーダーを指定できないというどうしようもない弱点もあり、最終的にborderプロパティも使うことに。そうすると最初からborderプロパティで全部指定した方が良いんじゃないかと思ってしまいます。うーん。結論：気にしないのが一番。
追記部分にはテストに用いたHTMLを載せておきますね(*'-')ノ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<meta http-equiv="content-style-type" content="text/css">
</head>
<style>
p { padding : 5px 0;margin:10px 0;}
</style>
<body>
<div style="font-family : Verdana;font-size:10px;width:200px;text-align:center;">
<p style="border:1px solid #333;">solid</p>
<p style="border:1px double #333;">double</p>
<p style="border:1px groove #333;">groove</p>
<p style="border:1px ridge #333;">ridge</p>
<p style="border:1px inset #333;">inset</p>
<p style="border:1px outset #333;">outset</p>
<p style="border:1px dashed #333;">dashed</p>
<p style="border:1px dotted #333;">dotted</p>
</div>
</body>
</html>
コメント
コメントの投稿