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子要素選択親要素の実装

推薦する

Dockerイメージの作成Dockerfileとコミット操作

イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...

Windows での MySQL 8.0.12 のインストール手順と基本的な使用方法のチュートリアル

この記事では、WindowsでのMySQL 8.0.12のインストール手順と使用方法のチュートリアル...

簡単な手順で純粋な CSS3 で 3D 反転効果を実現

フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...

Tomcatの自動シャットダウンに関するバグ修正

序文最近、4 年間実行されている Java EE Web プロジェクトでは、システムが開けないという...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

Nginx のステータス監視とログ分析の詳細な説明

1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...

MySQL 5.7 および MySQL 8.0 でルートパスワードを変更する方法の概要

MySQL 5.7 バージョン:方法1: SET PASSWORDコマンドを使用するフォーマット: ...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...

Mysql 中国語ソートルールの説明

MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...

デザイン参考 WordPressウェブサイト構築成功事例

これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

JavaScript 配列のマージのケーススタディ

方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...

ウェブ音楽プレーヤーを実現する js

この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

Tomcat を再デプロイした後にイメージやその他のリソースが自動的に削除される問題を解決します

昨日は写真をアップロードしてリンクを返す機能を実装していました。プロジェクトが Tomcat に再デ...