IEブラウザの互換性の問題の概要

李空4PX（IE6,7）

説明

子要素は、Li李浮動と4PX空になります下のLiに浮きません。それは時に子要素liの絶対位置空白を生成します。
理由：このような設定の高さなどのLiトリガーhaslayout、

Q：右のそれだけのliラベル？
S：はい。他の要素はdiv要素を達成するために問題がない場合は、それを交換し、生成されません

ソリューション

Liは、一般的にリストを使用して高さを設定する必要があり、トリガーからのバグが悪い要因が開始します

Liが上に設けられていますvertical-align: bottom;か、vertical-align: top;
フロートフロートのli場合に提供することができます*float: left

拡張

hasLayoutは、そのトリガ条件としてだけでなく、導入
https://blog.csdn.net/dl429/article/details/40778815

浮動二国間の距離（IE6）

説明

離れる外側方向から方向におけるブロック要素の場合は、両側から浮いている間場合[参照を生じる：https://www.jianshu.com/p/464d2f1586e0、https://zhidao.baidu.com/question/ 1823227618900206348.html ]
理由：https://jingyan.baidu.com/article/0bc808fc4ab5a31bd585b979.html
Iマージンが基準要素の値に設定されている設計上の欠陥のIEブラウザCSSの解析が近づいていると思うし、このブロックレベル要素普通のドキュメントフロー及び文書フローフロートに巻き込まので、ブロック・レベルの文書フローは再び浮動トリガhaslayoutと計算するために参照してきました。（シモンズ：フローティング要素は、「表示」特性は「ブロック」または「台」として算出されるようになります）

Q：唯一のブロックレベル要素右それだろうか？
S：はい。インライン要素と他の要素を生成しない
Qを：なぜ浮動要素の途中で同じ行はそれではないだろうか？
S：私はそれが通常のドキュメントフローとフロート文書フローとの間に挟まれていない要素の真ん中だと思うことは、何の計算バグは存在しません

ソリューション

それが唯一の3つの条件が満たされる生産されているので、1はそれを取り除くことができます

インライン要素の種類を提供： _display: inline
親要素のマージンに余裕の代替パディング内に配置されました
そのようなスイッチを配置するように、フローティング機構を使用しないでください。

拡張

二国間のトリガ条件があるオーバーラップから私たちに何を教えてください？どのような結果を折りますか？
https://www.nowcoder.com/questionTerminal/0138f0442baf4348895af7a53c8a609c
発生重なり同じBFC（ブロックレベルフォーマットコンテキスト）内の、2つのボックスの垂直方向に隣接する余白（マージン）。その値から大きい方の二つの外側部分に隣接するボックスの上下重なり、後の結果。[それぞれ、セットトップ及びボトムマージンする必要ので、それだけ垂直レイアウトブランクを意味]

浮動要素は、それが集合余裕することができ
https://zhidao.baidu.com/question/711408622812698165.html
;マージンは要素と要素間の間隔を設定することで
ラインの要素を占めるようになるブロック要素、インライン要素がどのくらいのデータ内容であります場所のためだけでなく、フローティング要素のアカウントへのコンテンツの場所のアカウントに応じて、どのくらいですが、それはフロート後にブロック要素となり、ドキュメントフローの正常な位置からそれを除去する、
ブロック要素は、マージンを設定することができます上、右、下、左間隔、左右の余白の行だけ内容がブロック要素としてマージン浮動要素と、有効になります

HTMLのmarginプロパティのdivがと比較して計算されているもの？
https://zhidao.baidu.com/question/558613528726229172.html
これら二つの特性は、モデルは例えば、DIVのパディングプロパティを設定し、それの子との間の根本的な違いであるボックスタグ要素はそれに応じて移動します。そして、その余白のプロパティを設定し、全体のdivタグは、兄弟や親に合わせて移動します。[マージンがパーセンテージであれば、それもトップの割合を計算するために、親要素の幅を基準とし、下が直接的な原因の幅が非常に親要素に対して計算されていることは、無限ループに陥るだろう、根本的な原因は、主流の習慣のページですランドスケープ形式は、非常に不確実です]

他の

1）画像は、高いCSSズーム（IE6,7）の広いセットに基づくことができません

セットアップ*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="scale")

2）透明性の不透明度をサポートしていません（IE6,7）

セットアップ*filter:alpha(opacity:0.8)

3）RGBAをサポートしていません（IE6,7）

例えば、background-color:rgba(0,0,0,0.5)対応する設定*filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000)
値変換テーブル：

プロパティ	数の	数の	数の	数の	数の	数の	数の	数の	数の
RGBA	0.1	0.2	0.3	0.4	0.5	0.6	0.7	0.8	0.9
フィルタ	19	33	図4c	66	7F	99	B2	C8	E5

参考：https://www.cnblogs.com/newh5/p/5660763.html

透明フロート4）故障（IE6、7）

擬似要素がサポートされていない後IE6,7、最も適切なズーム、浮動トリガhaslayoutのコンテンツを囲む方法として、ピッチを動作するように、空のdiv空白と特殊な透明フロート、またはコンテナを考慮することができます

.clear::after {display:block;content:'';clear:both;}  /* 主流浏览器 */
.clearDiv {height: 10px;_overflow:hidden;clear:both;}  /* 兼容方案1 */
.box {*zoom:1;}  /* 兼容方案2 */

垂直フォームコントロールの5）タイプの空の1ピクセル（IE6,7）

フロートは、入力に加え*float:left

使用して、フォームコントロールの6）タイプ`border:none`リセット境界無効（IE6、7）

セット*border:0又はような背景のリセット入力、input{background:#fff;}

7）インラインブロック要素は、オフセットの原因テキストインデント（IE6、7）に配置されました

代わりに、テキストのインデントのパディングやセット使用のdisplay:block
PS：入力、選択、ボタン、テキストエリアをデフォルト表示インラインブロックされています

ギャップ以下8）画像（すべてのブラウザ）

理由：ベースラインアラインメントのデフォルト画像（参照：https://www.jianshu.com/p/7b7ae3cc2a72）
溶液：ギャップが何画素特定線の高さ、およびフォントサイズに影響されます

ボトムラインアライメントの設定vertical-align:bottom
画像凝集体display:block（ベースラインアライメントブロック要素が存在しません）

9）ネストされたタグが不正な例外処理である（IE6、7）

たとえば、ul>li*4+p次のpのliタグと兄弟愛のための標準的なブラウザで食べれる、IE6,7はpタグ李で、それは父と息子の関係になり

10）限られた擬似クラス（IE6、7）をサポート

IE6でのみ支持リンク、ホバー、訪問、アクティブ4つの擬似クラス、および支持体に添加のみタグ;
訪問IE7でのみ支持リンク、ホバー、アクティブ4擬似クラス、それに添加することができます他のラベル;

11）最小の高さの問題（IE6）

高さは20ピクセル、セット未満20のピクセル解決さです_overflow:hidden

12）PNG画像は不透明（IE6）

jsのパッチまたはセット_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");

講読

以下の要約の一部との互換性の問題、すなわち
https://www.cnblogs.com/dothin/p/4979521.html
誰もがIE6の互換性に対処する方法ですか？[回答]インタビュー
https://segmentfault.com/q/1010000000347237
1、一般公衆がアクセス主流にブラウザを使用するか、彼らはページ上の自分のブラウザをアップグレードすることをお勧めするために、ブラウザの顧客向けバージョンをアップグレードするためにそれらを導く、ユーザーが促され
、主流のため、2ブラウザは何も厄介なレイアウト、ライン上の有意差の効果はありません、標準レイアウトがずれていない、行くテストを行って
jsのはIEが導入された条件付きコメントのHTMLコード互換識別の使用、CSSハック単独でパッチを使用し、3を
シミュレートするためのテスト他のブラウザ
のhttps： //developers.google.com/web/tools/chrome-devtools/device-mode/testing-other-browsers?hl=zh-cn