IE haslayoutを深く理解する

2344 ワード

Bubblings Blog原文アドレスから転載:http://riny.net/2013/haslayout/
1.haslayoutとは
Layoutはwindows IEのプライベート概念であり、要素がコンテンツの位置決めと寸法計算、および他の要素との関係と相互作用を決定する.1つの要素がレイアウトを持つ場合、それ自体とそのサブ要素の寸法と位置決めを担当します.一方、エレメントがレイアウトを持たない場合、その寸法と位置は、最も近いレイアウトを持つ祖先エレメントによって制御されます.
説明しなければならないのは、IE 8および以上のブラウザが新しい表示エンジンを使用しており、haslayout属性はすでに使用されていないため、ここで述べたhaslayout属性はIE 6およびIE 7のみである.
2.なぜhaslayoutがあるのか
理論的には、各要素は自分のサイズと位置決めを制御する必要があります.つまり、各要素は「レイアウトを持つ」べきです.もちろん、これは理想的な状態です.初期のIE表示エンジンでは、すべての要素が「レイアウトを持つ」と、パフォーマンスに大きな問題が発生しました.そのため、IE開発チームは、ブラウザのパフォーマンスオーバーヘッドを削減するためにレイアウトコンセプトを使用することにしました.つまり、レイアウトを実際に必要な要素にのみ適用するため、「レイアウトを所有している」と「レイアウトを所有していない」の2つの状況が発生しました.
3.デフォルトでレイアウトを持つ要素
次に、デフォルトでレイアウトを持つ要素を見てみましょう.

html, body
table
tr, td
img
hr
input, select, textarea, button
iframe, embed, object, applet
marquee

4.haslayoutの表示とトリガー
haslayoutはIEプライベートであり、css属性ではなく、cssで要素のhaslayoutを明示的に設定することはできません.ただし、javascriptを使用して、要素がレイアウトを持っているかどうかを確認できます.

    div;

var oDiv = document.getElementById('div1');
alert(oDiv.currentStyle.hasLayout);    //  false

要素にレイアウトがある場合、obj.currentStyle.hasLayoutはtrueを返し、そうでない場合falseを返します.hasLayoutは読み取り専用属性なのでjavascriptで設定することもできません.
実際の開発の過程で、多くのIEの下(IE 6、IE 7)の表示問題は、要素のhaslayoutをトリガすることによって解決することができ、以下にいくつかの一般的な要素haslayoutをトリガすることができる属性と方法をリストする.

float: left right
display: inline-block
position: absolute
width:  auto    
height:  auto    
zoom:  normal    
writing-mode: tb-rl

IE 7では、以下の属性で要素のhaslayoutをトリガーすることもできます.

min-height:    
min-width:    
max-height:  none     
max-width:  none     
overflow:  visible    ，       
overflow-x:  visible     ，       
overflow-y:  visible     ，       
position: fixed

5.haslayoutによるバグおよび解決方法
IEにはよくあるフローティングバグがたくさんあります.要素自体は、いくつかの基本プロパティの例外に対して問題を処理します.相対的に配置された要素にはレイアウトがありません.レイアウトを持つ要素の外側の距離はオーバーラップしません.......
もちろん発見されていないバグもあるかもしれませんが、一般的にはzoom:1を使用します.これらのバグを解決するためにhaslayoutをトリガします.zoom:1は要素の既存の表現に影響しません.zoom:1はIE 5.0でhaslayoutをトリガすることはできませんが、IE 5.0はすでに私たちのテスト範囲内ではありませんので、zoom:1を安心して使用することができます.また、IE 6および以前のバージョンのブラウザではheight:1%を使用してトリガーすることもでき、IE 7ではmin-height:0を使用してトリガーすることもできる.
参考記事:
http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html http://www.smallni.com/haslayout-block-formatting-contexts/

flannelネットワークのインストール

PHP:クライアントがプロキシサーバーと匿名レベルを使用するかどうかを判断する