【css】各ブラウザにおけるhrの問題について

1643 ワード

ページを作るときに分割線hrを使うことがありますが、ie 6とie 7の下で卵が痛いと表示され、各ブラウザに互換性のあるhrを書く方法を教えてあげます.
トップページでは、hrの各ブラウザでの違いを以下の表に示します.
 
通常のブラウザ
ie6、ie7
firefox
じつたかさ
height+border
height
height
背景色
background-color
background-color(高さ<=2 pxの場合、表示高さ背景色がグレーになり、colorで色を設定する必要があります)
background-color
たとえば、実際の高さ3 px、枠線1 px、枠線色07 f、背景色f 60の分割線を作成します.
hr{ 
    height:1px;
    background-color:#f60;
    border:1px solid #000;
    *height:3px;/* for ie6 ie7 */
    color:#f60;/* for ie6 ie7 */
} 
@-moz-document url-prefix(){ hr{height:3px;}} /* for firefox */

原文住所:http://sofi.sh/1328