IE 6, IE 7 の inline-block 考察

2008年3月19日水曜日

最初に…

この記事は少し長くて読みづらいです。要点は list item としてマークアップしてありますので箇条書き部分だけを読んでいただければ内容をわかっていただけるかもしれないです。

`inline-block` について

inline-block は CSS 2.1 で追加された display プロパティに指定できる値で、ブロック要素のように横幅/高さを指定できて、インライン要素のように改行されることなく同じ行内に並びます。CSS 2.1 の仕様書には、inline-block を指定された要素は置換要素と類似した振る舞いをするという内容も書かれています。 inline-block は現時点では、Opera, Safari, Mac版IE が対応しています。また、IE 5, 5.5, 6, 7 では、a や span など、インラインレベルの要素に対してのみ対応しています。ただし、特殊な方法を使うことで、ブロックレベルの要素に対しても使うことができます。特殊な方法については後述。

置換要素について

少し話は変わって、置換要素を思い出してみます。置換要素には iframe, img, input, textarea などがあります。置換要素は、ブロック要素のように横幅/高さを指定できて、インライン要素のように改行されることなく同じ行内に並びます。 IE では、置換要素は、display が inline で、hasLayout が true の状態でレンダリングされます。( hasLayout が true なのでが、ボタンやチェックボックスなどの input 要素が、IE のズーム機能で拡大するとずれてしまうというトラブルがあったりします。)

ここまでのまとめ

inline-block は、置換要素は類似した振る舞いをします
IE 5 ~ 7 では置換要素はdisplay が inline で、hasLayout が true

そして…これを強制的に再現してしまえば置換要素のようなレンダリングができてしまいます。

IE 5 ~ 7 で置換要素を再現する

置換要素を再現するには

div{
display:inline;
zoom:1; /* hasLayout を true にする */
}

のような指定をします。

この記事のまとめ

で、時間がなくなってきたのでこの記事のまとめをすると IE 5, 5.5, 6, 7 で display:inline-block を使う方法は 2通りあります。

a や span など、もともとインラインレベルの要素に対して、display:inline-block; を指定すれば、その要素は inline-block になります
p や div など、もともとブロックレベルの要素に対して、display:inline; と zoom:1; を指定すれば、その要素は inline-block と類似した振る舞いになります

もともと block の要素に対して、display:inline-block を指定しても、hasLayout が true になるだけで inline-block にはなりません。上記の結果を考えてみると IE 5, 5.5, 6, 7 では、

display プロパティが inline かつ hasLayout が true の要素の表示は置換要素のようにレンダリングされ、inline-block と類似した振る舞いをする思われる
display プロパティの inline-block は hasLayout を true にするだけで、これを設定しても display の値は変わらないと思われる

ということがわかります。 hasLayout って不思議な謎仕様が多いですね。ほかにもまだ何かありそう…。

トラックバックURI

http://www.yomotsu.net/wp/wp-trackback.php?p=390

ITキヲスク | IE6の頻出CSSバグいろいろと、それに対処するハック術さんからのコメント

2009年10月28日 10:55

[...] IE 6, IE 7 の inline-block 考察 | ヨモツネットr [...]

ASSEMBLE » IE6でもインライン要素にはinline-blockがきくさんからのコメント

2009年12月6日 2:34

[...] ような…」と表示確認してみるときいていて「あれ？」 IE 5, 5.5, 6, 7 では、a や span など、インラインレベルの要素に対してのみ対応しています。ヨモツネット : IE 6, IE 7 の inline-block 考察 [...]

[CSS] dtとddをfloatで横並びをすると、dlの背景が消えてしまうバグの回避方法さんからのコメント

2009年12月7日 11:57

[...] がなかったのでついでに調べてみました。 IE 6, IE 7 の inline-block 考察 [...]

ASSEMBLE » IE6でもインライン要素にはinline-blockがきくさんからのコメント

2010年2月4日 18:25

[...] ヨモツネット : IE 6, IE 7 の inline-block 考察より引用 [...]

【CSS】リストを横並びにし、中央寄せするさんからのコメント

2010年7月8日 2:01

[...] 参考サイト様 http://www.yomotsu.net/wp/?p=390 [...]