HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


点線と破線の表示(IE/dashed、dotted)

InternetExplorerの線種の問題

InternetExplorerでは、線のスタイルの表示に若干の不具合があります。対象となるのは以下のバージョンです。

  • InternetExplorer6を含むそれ以前のバージョンすべて

報告されている不具合

ボックスのボーダー(border)など、スタイルシートでは線種を指定する機会が多くあります。IEでは、この線種の解釈に若干の不具合があります。

CSSで定められる線種のスタイルはいくつかありますが、この中に点線(dotted)、破線(dashed)という線種があります。通常のブラウザでは、点線を構成する1点は「丸」で、一方、破線を構成する1点は「四角形」で表示するのが一般的です。

しかし、IEでは線の太さを1ピクセル(px)で表示した場合に限り、この点線と破線のスタイルに違いがなく、点線が破線で表示されてしまいます。

CSSサンプル

p.box1{
 width:500px;
 border:1px dotted #ff0000;
 background-color:#ffdff9;
}

p.box2{
 width:500px;
 border:1px dashed #ff0000;
 background-color:#ffdff9;
}

ボックスのボーダーを1ピクセルで表示した場合の点線と破線 サンプル

対処方法

残念ながら、現在有効な対処方法はありません。IEが次期バージョンでこの問題に対応することを期待するか、もしくは画像で代用するなどの方法が一般的です。

追記:Internet Explorer7.0ではこの不具合は修正されています。