hasLayout によって発生する CSS バグの一覧

hasLayout によって発生する CSS バグの一覧
IE には長い間問題がありました。誰もがテストを受けたとき、誰もが笑顔でしたが、それはただのニヤニヤでした...

残念ながら、国内市場にはそのようなニヤニヤしたブラウザが溢れているので仕方がありません...( IE678の死の速度に注目してください

一つ一つ確認し、読み、抜粋し、記録し、練習し、要約した後、私はついに彼の悪い癖の原因を根本的に理解することができました。

レイアウトがあります!

まず定義:

これは IE のユニークな特性です。要素がサイズを計算して独自のコンテンツを整理するか、親要素に依存してコンテンツを計算して整理するかを決定します。これら 2 つの概念を区別するために、レンダリング エンジンは hasLayout 属性 (true または false) を使用します。属性が true の場合、この要素はレイアウトをトリガーすると言えます。

hasLayout属性を持つタグ:

<html>、<body>、<table>、<tr>、<td>、<td>、<img>、<hr>、<input>、<button>、<select>、<textarea>、<fieldset>、<legend>、<iframe>、<embed>、<object>、<applet>、<marquee>

この属性の重要性は何ですか?

要素オブジェクトのレイアウトがアクティブになると、その要素とその子要素の配置とサイズの計算が独立して実行されるため、つまり独立したレイアウトになるため、ブラウザはレイアウトされた要素を処理するためにより多くのコストを消費します。パフォーマンスを向上させるために、IE はこのプライベート プロパティを考案しました。

hasLayout をトリガーできる CSS 機能:


コードをコピー
コードは次のとおりです。

表示: インラインブロック
高さ: (auto以外の任意の値)
幅: (auto以外の任意の値)
フロート: (左 || 右)
位置: 絶対
書き込みモード: tb-rl
ズーム: (通常以外の任意の値)

IE7 は hasLayout CSS 機能をトリガーできます。


コードをコピー
コードは次のとおりです。

min-height: (任意の値)
min-width: (任意の値)
max-height: (none 以外の任意の値)
max-width: (none以外の任意の値)
overflow: (visible 以外の任意の値、ブロックレベル要素のみ)
overflow-x: (visible 以外の任意の値、ブロックレベル要素のみ)
overflow-y: (visible 以外の任意の値、ブロックレベル要素のみ)
位置:固定

口角が下がり目が細くなる臨床症状を見てみましょう。(以下の内容はすべて私自身がテストしたものです)

質問ブラウザデモ解決
1入力[ボタン | 送信]が中央に配置されていませんIE8バグ | 修正済み幅を追加
2 body{overflow:hidden;} はスクロールバーを削除しませんIE6/7バグ | 修正済みhtml{overflow:hidden;}に変更
3 hasLayoutタグには高さがあるIE6/7バグ | 修正済みオーバーフローを追加:hidden;*height:0
4フォーム>[hasLayout]要素にmargin-leftがある場合、子要素の[input | textarea]には2×margin-leftがあります。 IE6/7バグ | 修正済みフォーム > [hasLayout 要素] {margin-left: width;}
フォーム div{*margin-left:width÷2;}
5子要素に position:relative が設定されている場合、親要素に overflow:[hidden|auto] を設定することは、子要素に position:visible を設定することと同じです。 IE6/7バグ | 修正済み親要素に対して位置を相対的に設定します。
6リスト内での混乱したフローティング:リスト内で画像をフローティングすると、画像が通常の位置からはみ出したり、リストスタイルがなくなったりするIE8バグ | 修正済みリストスタイルを背景画像に置き換える
7 thは親要素のテキスト配置を自動的に継承しません。 IE8バグ | 修正済みth; に text-align:inherit を追加します。
8許可されるスタイルの最大数(link/style/@import(link)を含む)は32です。 IE6-8 ─ 常識99.99%の場合、遭遇することはありません
9 PNG画像の色と背景色は同じ値ですが、表示が異なりますIE6-7バグ | 修正済みpngcrushを使用して画像からガンマプロファイルを削除します
10 margin:0 auto; ブロック要素を水平方向に中央揃えにすることはできませんIE6-8バグ | 修正済みブロック要素に幅を追加する
11疑似クラス :first-line | :first-letter を使用すると、属性値に !important が存在すると、属性が無効になります。 IE8バグ | 修正済み!important は悪です。もう使用しないでください
12 :first-letterは無効になりましたIE6バグ | 修正済み:first-letter を、p:first-letter h1{} ではなく、h1、p:first-letter{} などの {} に最も近い場所に移動します。
13 Position:absolute要素、display:blockでは、:hoverでないときはテキストのみがクリック可能IE6/7バグ | 修正済みa に背景を追加します。背景が透明な場合は、background:url('任意のページ内のキャッシュされたファイルリンク') を使用します。background:url(#)[公式ソリューション] は、HTTP リクエストが増加するため推奨されません。
14 dt、dd、li 背景が無効IE6バグ | 修正済みdt、dd、li{位置:相対;}
15 <noscript /> 要素のスタイルは、JavaScript が有効になっている場合に表示されます。 IE6-8バグ | 修正済みjs を使用して、display:none を <noscript /> に追加します。
16 liの要素はベースラインから外れて下に引っ張られますIE8/9バグ | 修正済みliにdisplay:inlineまたはfloat:[direction]を設定する
17リスト内のliのリストスタイルが表示されないIE6/7バグ | 修正済みli に margin-left を追加して表示用のスペースを残します (ul には追加しないでください)
18画像を垂直方向に中央配置できませんIE6/7バグ/修正空のタグを追加し、display:inline-block; などの「レイアウト」に割り当てます。
19ポインターのスタイルをカスタマイズできませんIE6-8バグ | 修正済みポインタファイルへの絶対パスを設定する
20高さが高さで定義された高さを超えていますIE6バグ/修正_overflow:hidden; (推奨) または _font-size:0; を追加します。
21幅がwidthで定義された幅を超えていますIE6バグ/修正オーバーフローを追加します:hidden;
22二重マージンIE6 ─ 常識フロート要素にdisplay:inlineを追加する
23負のマージン値が非表示になる: hasLayout の親要素内の非 hasLayout 要素。負のマージンを使用すると、親要素の外側の部分は見えなくなります。 IE6/7バグ/修正親要素から hasLayout を削除するか、子要素に hasLayout を割り当てて position:relative; を追加します。
24 2つのフローティング要素のうち1つのテキストを斜体に設定すると、もう1つの要素は斜体テキストの要素の下にドロップされます。 IE6バグ/修正斜体テキストの要素に overflow:hidden を追加します。
25 3pxの間隔: フロート要素の後の要素は3pxの間隔になりますIE6バグ/修正ちょうど3pxなので、_margin-left: -3px;などの「ブルートフォース」を使用するか、floatを設定します。
26 text-alignはブロックレベル要素に影響しますIE6/7バグ/修正フロートを配置するか、テキストの配置を個別に設定してください

<<:  SpringBoot と Docker の統合の詳細なプロセス

>>:  CSS子要素選択親要素の実装

推薦する

MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...

MySQLデータ移行方法とツールの分析

この記事は主にMySQLデータ移行方法とツールの分析を紹介します。サンプルコードを通じて詳細に紹介さ...

HTML テーブルレイアウト例の説明

HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合...

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...

MySQL binlog_ignore_dbパラメータの具体的な使用法

序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...

MySQLデータクエリが多すぎるとOOMが発生するかどうかについての簡単な議論

目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...

CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...

MySQL での IN データボリュームの使用の最適化された記録

MySQL のバージョン番号は 5.7.28 です。テーブル A には 390 万件のレコードがあり...

Vue の nextTick について話す

データが変更されても、DOM ビューはすぐには更新されません。変更直後にノードまたはその値を取得しよ...

Webフロントエンド開発CSS関連チームコラボレーション

フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...

Linux lseek関数の使い方の詳しい説明

注:記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...

Linuxで静的ネットワーク接続を構成する方法

Linux システムのネットワーク接続を構成するのは難しい場合があります。幸いなことに、多くの新しい...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...

MySQLの連結関数CONCATの使い方の詳しい説明

前回の記事では、MySQL の置換関数 (Replace) とセグメンテーション関数 (SubStr...

Ajax responseText による JSON データの解析のケース スタディ

ajax 処理後にサーバーから返される responseText が JSON データであるという問...