HTML+CSS のまとめ/BFC と ie 固有の属性についての話 hasLayout_html/css_WEB-ITnose

最近、IE の一般的なバグをまとめた記事を読みました。その記事では、IE のバグのほとんどはその固有の属性である hasLayout に起因していると述べられていました。この属性については以前に少し学習したことがありますが、深くは理解していなかったので、ここでこの属性についていくつかの関連情報を確認しました。

1. hasLayout の定義。

ここでは一つ一つ入力しませんが、Baiduのものをコピーするだけです。

IEでは、要素はサイズを計算して独自のコンテンツを編成するか、親要素に依存してサイズを計算してコンテンツを編成します。これら 2 つの異なる概念を調和させるために、レンダリング エンジンは、true または false の hasLayout 属性を使用します。要素の hasLayout 属性値が true の場合、その要素にはレイアウトがあると言います。

true に設定されている場合、要素自体をレンダリングする必要があるため、送信コンテンツを含めるために要素を展開する必要があります。 たとえば、切り詰められていないフローティングまたは非常に長い単語の場合、 haslayout が true に設定されていない場合、要素はそれをレンダリングするために祖先要素に依存する必要があります。ここで IE の多くのバグが発生します。

要素にレイアウトがある場合、その要素はそれ自体と、可能な子孫要素のサイズと位置を決定します。 簡単に言えば、これは、この要素がこれらのタスクを完了するために祖先要素に依存するのではなく、それ自体とその内部のコンテンツを維持するためにより多くの時間を費やす必要があることを意味します。したがって、一部の要素にはデフォルトでレイアウトが設定されます。要素が「レイアウトを持つ」または「レイアウトを取得する」、あるいは要素が「レイアウトを持つ」と言うときは、その Microsoft 固有のプロパティ hasLayout が true に設定されていることを意味します。 IE の HTML 要素に haslayout があるかどうかは、IE Developer Toolbar で確認できます。IE Developer Toolbar では、通常、haslayout を持つ要素は「haslayout = -1」として表示されます。

CSS には haslayout 属性がないことに注意してください。IE では、特定の属性を特定の値に設定することによってのみ hasLayout 属性をトリガーできます。この属性は IE8 以降のバージョンでは廃止されました。

先 まず、デフォルトの「Haslayout」の要素を見てみましょう。

& lt; html & gt; 、

---

、、、、<fieldset>、<legend> </p> <li><iframe>、<embed>、<object>、<applet></li><marquee><li> </li> <li>「haslayout」を有効にする方法 </li>??次の CSS プロパティを調整します: <li> </li>width: non- auto の任意の値?? が優先されます。 <li> </li>height: non-auto の任意の値?? を考慮してください。この方法は、Holly hack と呼ばれ、この要素の高さを 1% に設定します。 ）。ただし、要素のオーバーフロー プロパティが可視に設定されている場合、このメソッドは機能しないことに注意してください。 <li> </li>zoom: 通常以外の値はありますか?? この属性も IE に固有です。通常、テスト中にズームを使用します。 1.他のプロパティを変更することでレイアウトが破壊されることを回避できます。 <li> </li>position: 絶対??新たな問題が発生する可能性があります。 <p> <strong>float: left/right??ie 要素が float に設定され、haslayout がトリガーされるため、多くの一般的なバグが発生します。 </strong> </p>display:inline-block?? この属性は、インライン要素がレイアウトを取得する場合に使用する必要があります。 <li> </li>min-height、max-height (なしを除く)、min-width、max-width (なしを除く) 任意の値を設定します??ie7 の場合。 <li> </li>overflow、overflow-x、overflow-y 可視以外の任意の値??ie7 の場合。 <li> </li>位置: 固定??ie7 の場合。 <li> </li> <li>Reset "haslayout"</li>: 他の属性なしで haslayout をアクティブにする必要があります。 <li> <li>幅、高さ（「自動」に設定）</li> <li>max-width、max-height（「なし」に設定）（IE 7の場合）</li> <li>位置（「静的」に設定）</li> <p>float（に設定） <strong> </strong>overflow (「visible」に設定) (IE 7 の場合)<br> </p>zoom (「normal」に設定)<li> </li>writing-mode (「tb-rl」から「lr-t」に設定) <li> </li> 表示属性の違い: haslayout 属性が「inline-block」で有効化されている場合、この属性が別のルールで「block」または「inline」にオーバーライドされても、haslayout フラグは false にリセットされません。中間幅と中間高さをデフォルト値の「0」に設定しても hasLayout が割り当てられますが、IE 7 は不正な属性「auto」を受け入れて hasLayout をリセットできます。 <li> </li> <li> </li> <li>2. haslayout</li> <li>の具体的な機能<p><strong> </strong>前編では haslayout の定義と起動条件をまとめましたが、ここで私たちが最も気になる、haslayout の用途について説明します。 haslayout の役割について話すために、まず BFC を見てみましょう。 </p> <p><strong> </strong>BFCとは何ですか？ BFC の正式名は「Block Formatting Context」で、直訳すると「ブロックレベルの書式設定範囲」となります。要素がそのコンテンツをどのように配置し、他の要素と関係付け、相互作用するかを決定する W3C CSS 2.1 仕様の概念。視覚的なレイアウトに関しては、ブロック フォーマット コンテキストは、HTML 要素が特定のルールに従ってレイアウトされる環境を提供します。ある環境内の要素は、他の環境のレイアウトに影響を与えません。 </p> <p> BFC をより深く理解するには、まずボックスとフォーマットコンテキストの概念について説明する必要があります。 Web ページのレイアウトは多くのボックスで構成されており、これらのブロックがボックスであることがわかっています。要素のタイプと表示属性によって、このボックスのタイプが決まります。 さまざまなタイプのボックスがさまざまなフォーマット コンテキスト (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、ボックス内の要素はさまざまな方法でレンダリングされます。 </p> <p> これらのボックスは次のとおりです: </p> </li> <li>ブロックレベルのボックス: block、list-item、table の表示属性を持つ要素はブロックレベルのボックスを生成します。そして、ブロックの書式設定コンテキストに参加します。 </li> <li>inline-level box: inline、inline-block、inline-table の表示属性を持つ要素は、インライン レベルのボックスを生成します。そして、インライン書式設定コンテキストに参加します </li> <p> そして、書式設定コンテキストは、その子要素がどのように配置されるか、および他の要素との位置関係を決定するレンダリング領域です。 </p> <p> 上記の基本概念に基づいて、<strong> BFC をコンテナーとして理解すると、BFC コンテナーでは、要素が BFC ルールに従ってレイアウトされます。 </strong>たとえば、フローティング要素は BFC を形成します。これが、フローティング要素のレイアウトが通常のドキュメント フローでのレイアウトと異なることがわかる理由です。 <br></p> <p> <strong>BFC</strong>のルールを簡単にまとめると、 <br></p> <li>内部のBoxが縦方向に次々と配置されます。 </li> <li>ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います </li> <li> 各要素のマージン ボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。 </li> <li>BFC エリアはフロート ボックスと重なりません。 </li> <li>BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。 </li> <li>BFC の高さを計算するとき、浮動要素も計算に参加します</li> <p> <strong>どの要素が BFC を形成するか</strong>: </p> <li>ルート要素</li> <li>float 属性は none ではありません</li> <li>position は絶対または固定です</li> <li>display はインラインですblock, table -cell, table-caption, flex, inline-flex</li> <li>overflow は表示されません</li> <p> <strong>レイアウトにおける BFC の役割</strong>:</p> <p> 役割について話すときは、BFC のレイアウト仕様を理解する必要があります。 最初のものについては特に言うことはありません。通常のドキュメント フローのレンダリング順序で要素を配置するだけです。 </p> <p> 2番目の項目は、よく話題になるマージンの重複問題です。隣接する 2 つの要素間の垂直マージンの重なりを回避するには、それらの要素を異なる BFC で定義する必要があります。解決策は、要素の 1 つを要素のレイヤーでラップし、そのレイヤーでラップされた要素で BFC をトリガーすることです。 (上記の css 属性はここに追加できます。) </p> <p> 3番目の意味は、BFCを含むブロックでは、各要素が親ボックスに合わせて左揃えになるということです。要素に左マージンがある場合、要素のマージンは親ボックスの境界線に揃えられます。そのため、絶対配置を設定すると、絶対配置を持つすべてのおなじみの要素が左上隅に重なるように初期化されます。 <br></p> <p> 4番目の項目は、フローティングレイアウトに関連しています。一般に、フローティング要素はドキュメント フローから切り離されます。つまり、スペースを占有しません。その兄弟要素は、左上隅でその要素と重なります。しかし、2 つの隣接する要素がフロートに設定されている場合、第 4 条に従って、両方の要素が BFC ルールに従ってレンダリングされることを意味し、BFC 領域は互いに重なり合わないため、要素が後で排他的スペースを占めることができる理由が理解できます。フロートのセット。 </p> <p> 5番目の項目は特に分かりませんので、とりあえず置いておきます。 </p> <p> 第6条も非常に多いです。通常のコンテナでは、内部にフローティング要素がある場合、高さを設定しないとコンテナを立てかけることができません。このとき、overflow:hiddenを設定してBFCに変更することで、フローティング要素を含めることができます。 </p> <p> </p> <p> BFC の説明はこれで終わり、最初に議論した haslayout の問題に戻ります。 IE7 以下のバージョンは BFC をサポートしていませんが、プライベート属性 haslayout を持っているため、要素の haslayout をトリガーすることで BFC と同様の効果を実現できます。 <br></p> <p> </p> <p><strong>3. IE での haslayout によるバグ </strong></p> <p><strong>...続きます。 </strong></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="css: nth-of-type() セレクターの使用法_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/272388.html">css: nth-of-type() セレクターの使用法_html/css_WEB-ITnose</a></span><span>次の記事：<a class="dBlack" title="css: nth-of-type() セレクターの使用法_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/272390.html">css: nth-of-type() セレクターの使用法_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>