hasLayoutとzoom: 1

一口にロストテクノロジーと言っても、名前を聞いて「そんなものがあったなあ」と感傷に浸るものもあれば、「もはや思い出したくもない」ようなものまで存在します。ここでは、Internet Explorer 7まで存在した独自仕様のhasLayoutについて取り上げてみます。

意味不明な存在

「ブラウザごとに挙動が異なる」場面は現代でもありますが、その様相はそれぞれです。

• 最新の仕様に追加された機能が、ブラウザではなかなか使えない
• ブラウザ独自の拡張なので、あるブラウザでしか表示されない
• ブラウザにバグがあって、規格上は問題ないものが表示されない

納得度は上から順に下がっていくかと思いますが、今回テーマとするhasLayoutはどれでもなく、「既存のHTML要素に自動で適用される独自仕様」なので、さあ大変です。

hasLayoutは、その名の通り、「この要素がレイアウト情報を持つか」を定義する値で、true/falseで切り替わります。falseのときには本来効くべきレイアウトが適用されないという闇に入っていきます。

直接変えられない

さらに厄介なことには、CSSでhas-layout: trueのように変更もできず、適用される条件を整えてtrueに切り替えるしかないのです。具体的には、

• display: inline-block
• heightあるいはwidthをauto以外にする
• float: leftあるいはfloat: rightにしてフロートさせる
• position: absolute
• writing-mode: tb-rl
• zoomにnormal以外を指定する

といった指定が必要になります（参考）。もちろん、そのためだけに縦書きにするわけにも行かないですし、レイアウトの都合上かけられないものも多くあるのですが、要素をzoomしないといけない機会はそうそうあるわけでもないので、zoom: 1が事実上hasLayoutセット用のCSSとして扱われるようになっていました。

その後

IE 8でhasLayoutもなくなり、2016年にIEのサポートサイクルが変更されたことで、IE 7が完全に過去のものとなっています。 一方で、zoomプロパティはIEとそれを受け継いだEdgeだけでなく、どういうわけかWebkitでも実装されて、現在にいたっています（MDN）。