Web 2.0が称されていた2000年代初頭。Web制作界隈でもtable要素を使ったテーブルレイアウトからセマンティックなHTMLとCSSレイアウトへ移行していた時期でもあり、PCのブラウザは群雄割拠の時代でもありました。まだGoogle Chromeもスマートフォンもない頃です。その当時は以下のブラウザが主流でした。

• Internet Explorer（Windows IE5.0〜6.0 / Mac IE5.x）
• Mozilla FIrefox
• Safari
• Opera

その中でも問題だったのがIE5〜6（Internet Explorer）でした。IEはW3CのWeb仕様に準拠していないうえに、独自実装やバグが多く他のブラウザと表示や挙動の差を埋めるのに苦労したとかしないとか（当時は８割近くがIEユーザだったので無視はできなかった）。今日はそんな思い出話。

ボックスモデルの解釈

当時のIEはボックスモデルの解釈がおかしいという不具合が有り、(X)HTMLのドキュメント宣言やxml宣言の有無でレンダリングモードが変わるなどの挙動がありました。今でいうbox-sizingのcontent-box or border-boxみたいなものですね。もちろん当時はbox-sizingのような便利なプロパティはまだありません。

モダンブラウザでの解釈（box-sizing:content-box）

widthやheightを指定した時、paddingとborderを含めない

IE（後方互換モード）での解釈（box-sizing:border-box）

widthやheightを指定した時、paddingとborderを含める

これにより、IEとモダンブラウザで大きさが変わりレイアウト崩れが起きる…なんてことがありました。回避法としてはpaddingやborderを指定する要素にはwidthやheightを指定しないことでした。

floatを使ったレイアウトテクニック

tableでレイアウトしていた頃は、レイアウトカラムをtable要素で組んでいましたが、CSSレイアウトになってからは回り込み目的のfloatプロパティでWebページの大枠のレイアウトを作るようになりました。まだflexやgridなんて無い頃です。一方floatを使うと回り込み解除（clear）する必要があります。回り込み解除のために任意の場所に無駄にHTMLを追加するのはバッドノウハウだったので、親要素で回り込みを解除するclearfixと呼ばれるテクニックが登場します。

HTML

<div class="parent">
 <div class="left">左カラム</div>
 <div class="right">右カラム</div>
</div>

CSS

/*親ボックス要素*/
.parent{
 width: 100%; /*←(1)*/
}
.parent::after{ /*←(2)*/
 display: block;
 clear: both;
 content: "";
}
/* MacIE用 */
/*\*//*/
 display: inline-table; /*←(3)*/
/* */

/*左レイアウト要素*/
.left{
 float: left;
 width: 20%;
}
/*右レイアウト要素*/
.right{
 float: right;
 width: 75%;
}

(1)で親要素にwidthプロパティで何かしらの値（auto以外）を指定することです。WinIE5〜7ではこれだけでfloatを解除できます（※IE5.0を無視していいのであれば、親要素にzoom:1;というプロパティを指定するだけでもいけた）。IEには独自のhasLayoutという概念がありまして、それが影響していました。

(2)次にモダンブラウザ向けに、after疑似要素を使って無理やり回り込みを解除します。IE5〜7では疑似要素に対応していない為使えません。

(3)MacIEでは、(1)(2)の方法が使えないので、ホーリーハック・バックスラッシュハックと呼ばれるCSSハックを使ってMacIEだけにdisplay: inline-table;を読ませてfloatを解除します。

marginが２倍キャンペーン

ブロック要素に、floatと同じ方向に左右marginを指定するとIEだけ値が2倍になってレイアウトが崩れる…というバグがありました。

.left{
 width: 200px;
 float: left;
 margin-left: 10px; /* ←IEだけ20pxになる */
 display: inline;  /* ←これを指定するだけで直る */
}

対象のセレクタにdisplay: inlineを指定するだけで直る上に、他のブラウザでも影響を受けないので重宝していました。

.top{
 margin-bottom: 50px;
}
.bottom{
 margin-top: 100px;
}

また上下に要素があり、それぞれにmarginがある場合本来は相殺されるのが正しいです。上記の例であれば要素間の隙間は100pxになります。しかしIEでは相殺されず150pxになってしまいます。

font-size固定（px/pt）にするとブラウザでフォントサイズ変更できない

IEではフォントサイズを［最小］［小］［中］［大］［最大］と変更できました。しかしfont-sizeプロパティでpxなどを指定するとフォントサイズが変更できない仕様でした。ユーザビリティの観点からフォントサイズを変更できるようにすることが要件だったため、emや%で指定することが必須でした（remはまだ無かった）。

親要素で%やemで指定すると、子要素でもフォントサイズを継承してしまうため、一体この要素は何px相当のフォントサイズなのか？一見して分かりづらいので設計は要注意です。

CSS2セレクタや半透明PNGが使えない

Windows版のIE5〜6ではアルファチャンネルを含むフルカラーPNG画像が使えずデザインに影響が出ることがありました。その場合はCSSハックやPolyfillをつかい、無理やり対応させたりそもそも半透明PNGを使わないという選択肢に迫られました。

一方でMacOS版のIE5では、半透明PNGが使えたんですね…。これはWindows版のIEがTridentというブラウザエンジンなのに対し、MacOS版のIE5はTasmanというブラウザエンジンで全く別物だったことに起因します。これに付随してWindows版のIE5〜6ではCSSの「子供セレクタ div>p{}」「隣接セレクタ div+p{}」が使えないのに対し、MacOS版のIE5では使えたという中途半端な状態となっていました。

語りたいことはたくさんあるけれど…

IEはCSSに限らずJavaScriptの実装や動作においても仕様が異なっておりエンジニアの人は苦労しました。その実装の差を埋めるためのフレームワーク、jQueryが登場したのはWeb制作の世界を大きく変えました。IE7〜IE11もといMicrosoft Edge（EdgeHTML版）も面倒なCSSやJSのバグが多くて、長い間苦しめられました。

次回、ガラケーHTML制作苦労話 i-mode,EZwebブラウザ編…ッ！（覚えていたら）

おしまい♥

タグ：Webブラウザ