- 2010年4月22日 14:31
- CSS
hrタグを使って余白の調整に挑戦
とあるサイトの新規ページを作成していたところ、既存のページよりあっとうてきにコンテンツボリュームが少なく、サイドカラムのほうがボリュームがでてしまいました。
まあ、そんなことはよくあることなのですが、な・な・なんと、フッター部分に設置した「ページTOPへ戻る」ボタンがサイドカラムにめり込んでいるではないか！
こういった事態に対応すべく、コンテンツが少ないページのサイドカラムのみ、下に余白を取ろうと思い、hr タグを入れてみました。
CSSでhrタグの線を消す
hrタグをそのまま使うと当然線が表示されます。そこでcssで線が消える（見えない）ように調整します。
hr {
bordr: none;
height: 0;
}
これで線が消えるはず。あとはmarginで余白を取れば設定完了。楽勝楽勝！
などと思いつつ、ブラウザでチェック。IE8やFirefox、Chorome、Operaなどは問題なく表示されている。
しかしIE6で見てみると、なんと線が残っているではありませんか！？
IE6、IE7のバグ
そうです、例によってIE6、IE7のバグが出てしまいました。 一瞬hrタグを使うのはやめようかと思いましたが、ちょっとネットで調べてみることに。
すると「モモンガの森」さんというブログで解決方法が見つかりましたので、参考にさせていただきました。
IE6,7でのバグを回避するには下記の1行をcssに追加してください。
*border-top: 1px solid;
これで無事解決！ モモンガの森さん、どうもありがとう！
- Older: URLのwww・index.htmlのありなしを統一
Comments:0
Trackbacks:0
- TrackBack URL for this entry
- http://www.imparl.net/mt/mt-tb.cgi/8
- Listed below are links to weblogs that reference
- hrタグの線を消す方法 from Web制作事件簿