haslayout_html/css_WEB-ITnoseの詳細説明-htmlチュートリアル-php.cn

haslayout_html/css_WEB-ITnoseの詳細説明

WBOY

リリース： 2016-06-24 11:36:09

オリジナル

1055 人が閲覧しました

定義

Haslayout は、IE7 ブラウザーの固有の属性です。 hasLayout は、true または false の 2 つの状態を持つ読み取り専用プロパティです。 true の場合は、要素に独自のレイアウトがあることを意味し、そうでない場合は、要素のレイアウトが親要素から継承されることを意味します。
[注意] 現在の要素の hasLayout ステータスは、element.currentStyle.hasLayout を通じて取得できます

デフォルトで hasLayout をトリガーするタグ

【1】html, body

2] img
ログイン-In- In-In-In-In-In-In-Line-blcok--display-inline-blcok
》高さ/幅: auto を除く
【3】float:left/right
【4】position:absolute
【5】】writing-mode (IE独自プロパティ、テキストの縦表示を設定): tb-rl

【6】zoom (IE独自プロパティ、オブジェクトのズーム率を設定または取得): 通常

[ hasLayout]

をトリガーするIE7独自のCSSプロパティ
【1】min-height/max-height/min-width/max-width: noneを除く
[2] overflowoverflow-xoverflow-y: 可視を除く
[3] Position:固定

目的

[1] IE7-ブラウザの親枠で子の上下余白が妨げられない問題を解決するバグ

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    border: 10px solid black;    background-color: red;    /*触发hasLayout*/    /*float:left;*/}.in{    height: 100px;    width: 100px;    margin-top: 50px;    background-color: blue;}</style></head><body><ul class="list">    <li class="in"></li></ul></body>    </html>

ログイン後にコピー

【2】display:inline toと連携ブロック要素に inline-block をシミュレートさせます

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.box{    width: 100px;    height: 100px;    background-color: red;    display:inline-block;    /*配合display:inline触发hasLayout*/    /*     float:left;    display:inline; */}</style></head><body><div class="box" id="box"></div><span>测试inline-block用</span></body>    </html>

ログイン後にコピー

【3】IE7 ブラウザでの LI4px ギャップのバグを解決します (IE7 ブラウザの li は高さまたは幅またはズーム:1 で、インライン要素のみを含み、インライン要素は display:block に設定され、li)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    width: 200px;    background-color: lightgreen;}.in{    height: 100px;    background-color: lightblue;}.span{    display: block;    zoom:1;}</style></head><body><ul class="list">    <li class="in">        <span class="span">1231</span>    </li>    <li class="in">        <span class="span">1232</span>    </li></ul></body>    </html>

ログイン後にコピー

の下に 3px 多くの垂直間隔が表示されます【4】トリガー float 要素の親の hasLayout、フローティング要素はレイアウト要素によって自動的に組み込まれます。 IE7 ブラウザーでのクリアフローティングと同等です