レイアウト配置用クリア IE6配置ずれバグ対策ほか
MovableTypeのCSSを研究シリーズ、第１弾（って、「第２弾」があるかどうかわからんが）。人に読ませるためというより、個人的メモの色彩が強いのであしからず。
MobavleType3.2のデフォルトCSSは、トリッキーなCSSも積極的に利用したかなり考えられたものになっているっぽいので、ちょっと研究してみようと思った次第。参考までに、MovableTypeデフォルトのままいじっていないMovableType デフォルトCSS研究ページも新設した。
さて、まずは「.pkg」部分をメモ。
MovableType デフォルトCSS研究: レイアウト用のfloat等をCSSでクリアするためのpkg
.pkg:after
{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
* html .pkg { display: inline-block; }
/* no ie mac \*/
* html .pkg { height: 1%; }
.pkg { display: block; }
/* */
レイアウト用のdivタグ等に指定する用に考えられたスタイル。float等を位置ズレなくクリアするためのハック、上記でひとまとめのセットで利用すべき。
:after以下の部分は、コンテンツの最後に content: " "つまり空の文字を挿入し、それをなるべく見えない形（font-size: 0.1em;とか）で指定させた上で、「clear: both;」でクリア。これで「br clear="all"」等をいちいち付加せずとも、floatがうまく配置される、という思想だが、残念ながらIEはそもそも「:after」に対応していない。
そこで、IE対策がそれ以下のもの。WinIEとMacIEにそれぞれさらなるハックを適用させる。
「* html」は、いわゆる「スターハック」で、これが適用されるとWinIE4以上とMacIE5以上にのみスタイルが適用される。「display: inline-block;」は、ブロックボックスでありながらインラインに流し込まれるようなスタイルを指定するもの (参照→Demo of 'inline-block')。
「/* no ie mac \*/」から「/* */」は、MacIE5をはじくハック。その後のスターハック「* html」との組み合わせで、「* html .pkg { height: 1%; }」はWinIEしか適用されない。
ブラウザをFirefox/Safali、WinIE、MacIEの３つに分けると、以下のような適用状況になる。
display: inline-block; WinIE、MacIE
height: 1%; WinIE
display: block; Firefox/Safaliなど。
