カテゴリー別アーカイブ: html & css

コンテナボックス内のフロートクリアについて2

確認済みブラウザ

IE 5.5/6.0/7.0 IE 5.1.7 Firefox 1.5/2.0/3.0 Safari 2.0/3.1 Opera 9.0 Netscape 7.1

Internet Explorer 7 の日本語版が配布されたことに伴い、動作確認をしてみたところ、コンテナボックス内のフロートクリアが動かなかったので、その対処バージョンです。

This hack is old. Please use the latest edition.
このハックは、古いです。最新版を使ってください。

hwrapにある IE5〜IE6対策の hight:1% を html>body で hight:auto に置き換えます。この1行でIE7にも対応できるようになりました。
続きを読む コンテナボックス内のフロートクリアについて2

Mac版IEのoverflowバグ回避について

Mac版のIE がサポート終了、配布中止になってから10カ月。WindowsIE5.5同様、いまだ多くの制作現場では対応するべきブラウザになっています。

さて、Mac版IEのoverflowバグですが、div要素以外の、ブロック要素(p要素やpre要素など)にoverflow(visible以外)を設定した場合、表示がおかしくなります。

続きを読む Mac版IEのoverflowバグ回避について

コンテナボックス内のフロートクリアについて

確認済みブラウザ

IE 5.5/6.0 IE 5.1.7 Firefox 1.5/2.0/3.0 Safari 2.0/3.1 Opera 9.0 Netscape 7.1

WindowsIE 以外のブラウザでは、ボーダーや背景のあるコンテナボックス内で、float:left または float:rightを使うと、コンテナボックスを自動的に下まで広げません。これがCSSの仕様上正しい解釈らしいのですが、ちょっと扱いにくいです。

This hack is old. Please use the latest edition.
このハックは、古いです。最新版を使ってください。

続きを読む コンテナボックス内のフロートクリアについて

アンダースコアハック

アンダースコアハックと言う、一般的にWin IE6用とされているのCSS Hackがあるのですが、これを使うと CSS ValidatorFirefox でエラーとなります。
(上記の理由でお勧めできるハックではないのですが、大手一般企業でも使ってるサイトは結構あります)

アンダースコアハックは、IE6用として紹介されている事が多いですが、Win版IE4〜IE6まで使える汎用的なCSS Hackです。
確かに、お手軽なのかもしれませんが、書式上認められていないので、別の方法をお勧めします。

おすすめは、「html>body」(Child Selector)を使う書式です。場合によっては「html[xmlns] div」(Attribute Selector)でも、いいかもしれません。
いずれにせよ手順としては、先にIE4〜IE6用のCSSを書いて、その後にChild Selectorを使いCSSを上書きすると言う物です。

ちなみにこのサイトでは今のところ、「* html」(Star html bug)を使っています。
こちらはアンダースコアハックよりは、エラーが出ないだけ書式的にマシですが、やはり不自然なので、いずれ変えたいと思います。

W3C CSS Validatoでcolor及びbackground-colorに関する警告

W3C CSS Validatoで「指定された全面色(color)に対応する背景色(background-color)が指定されていません」と、color及びbackground-colorに関する警告が出る事があります。colorが指定されていない場合はcolor:inherit;、背景の場合はbackground-color:inherit;を指定すると警告が出なくなります。
inherit は、親要素の値を明示的に継承する指定とのことです。