hr要素のボーダーが正しく設定されない

症状

hr要素にボーダーを指定するとき、指定内容によってはボーダーが表示されずhr要素が点のようになることがある。

例示

<hr style="border-top:2px dashed red; border-bottom:2px dotted red;">

hr要素を赤い破線で表示させようとしています。

スクリーンショット

WinIE6WinIE6.0での表示(標準モード)

N7N7.02での表示(標準モード)

補足

hr要素にheightプロパティを指定するとバグを回避できます。heightプロパティには上ボーダーの幅と下ボーダーの幅の合計値と同じかより大きい値を指定してください。

<hr style="border-top:2px dashed red;
  border-bottom:2px dotted red; height:4px;">

または、ボーダーの指定方法を変えることでバグを回避できることもあります。なお、同じような症状のバグがありますが(Mozバグ053)、このバグとは回避法が異なります。hr要素に display:block; を指定してもこのバグは回避できません。

修正状況

N7.02およびMoz1.4betaの標準モードおよび互換モードで不具合の発生が確認されました。

スポンサーリンク

関連記事

スポンサーリンク

SQLite Control Center (SQLiteCC)

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る