フロントエンドの互換性の問題の概要

## HTMLの記事

#####スタイルの互換性の問題

<!-- IE 按 Edge 模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- IE 8 9 10 按 IE7 模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Emulate7" />
复制代码

##### Quirksモード

、およびテーブルと、境界ボックス：癖モードはW3C仕様は互換ボックスサイジングと同様、左右の境界（同じ高さ）の全範囲を含む、パディングについて、contentWidthの幅であるモード、に準拠していないですフォントサイズは親要素から継承されていません。以下の例では、ブラウザのQuirksモード（癖モード）をトリガすることができます：

私は、DOCTYPEトリガQuirksモードを書いていません
プラスの下では、IE6のフロントはQuirksモードをトリガします
最初に添加して、IE7モードが入り、癖
任意の非空白文字がある前に、それはIE6でモードをトリガする癖
そこにXMLがないIE7トリガQuirksモードでは、ですが、他の非空白文字を使用することはできません前に、

document.compatModeをチェックし、あなたはブラウザがどのモードで動作し表示することができますQuirksモード、標準モード値に値BackCompat CSS1Compat

#####表示：ギャップとインラインブロック要素

<!-- 以下的 li 元素是 display: inline; 类型的 -->
<!-- 这样写元素之间有间隙 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>pineapple</li>
  <li>peach</li>
  <li>orange</li>
</ul>
<!-- 换个写法解决问题-->
<ul>
  <li>apple</li><li>
  banana</li><li>
  pineapple</li><li>
  peach</li><li>
  orange</li>
</ul>
复制代码

発生する可能性がドキュメントスタイル##### IEの一時的な障害

<head>
    <!-- meta部分 -->
    <title></title>
    <!-- 可能的script部分 -->
    <script type="text/javascript"></script>   <!-- 关键：添加一个空标签 -->
    <!-- link部分 -->
</head>
复制代码

## CSSの記事

#####ダブルスペースの問題

/*一下代码在 IE6 中会出现双倍间距*/
#box{
  float: left;
  margin: 10px;
}

//解决方法
#box{
  float: left;
  margin: 10px;
  display: inline;
}
复制代码

#####転位問題

/*IE6中，这样的多个盒子并列时会发生向下偏移，应该对偏移的盒子添加负 margin-top 进行修正*/
.box{
  float: left;
}
复制代码

##### E6奇妙な問題の幅、高

IE6ボックスの幅（幅）及び高さ（高さ）が奇数のバグで提供され、設定することも可能です。

##### IE6いないいないばあバグ

div＃トップはクリアされるまで、1つの以上のdiv、floatを追加し、左へのdiv＃フロートフロートを追加しました：

<style>
#top{
    border: dotted 2px black;
    background: #eee;    /*top有背景*/
}
#float{
    height: 196px;
    width: 196px;
    border: 2px solid red;
}
.border{
    border: 2px solid green;
}
.clear{
    clear: both;
    border: 2px solid blue;
}
</style>
<body>
    <div id="top">
        <div id="float">float div</div>
        <!-- 这以下在 IE6 中不能正常显示 -->
        <div class="border">inside-div text!</div>
        <div class="border">inside-div text!</div>
        <!-- 这以上在 IE6 中不能正常显示 -->
        <div class="clear">clear div</div>
    </div>
</body>
复制代码

ソリューション、高さや幅を#topトップします

#top{
    height: 300px;
}
复制代码

#####箱の崩壊

この問題は、より一般的です外の要素からインナーボックスが設定されたときに発生します

/*发生盒子坍塌*/
#box{
  height: 300px;
}
#box .inner-box{
  margin:20px;
}

/*修正*/
#box{
  height: 300px;
  margin-top: -20px;
}
#box .inner-box{
  margin:20px;
}
复制代码

#####文字サイズ

フォントサイズが異なるブラウザ上で一貫性がありません。例えばフォントサイズ：14px、IE内の実際の行高い16pxに、3pxブランク以下、Firefoxの17pxの実際の行高、ブランク3px以下、1ピクセルブランク上部;いないオペラ同じ。統合ソリューション指定された行の高さ行の高さ

html{
  font-size: 14px;
  line-height: 14px;
}
复制代码

デフォルトに16pxの10pxのにマッピングするためには、この定義62.5％、そう計算する1EM = 10pxのより助長：加えて、我々は、フォントサイズが発生します。

#####要素のデフォルトの余白を削除します

私たちの組版欠点のデフォルトの余白を持つ要素がたくさんあります。しかし、ワイルドカード*を使用すると、パフォーマンス上の問題がある余白を削除し、その次の文で、デフォルトのマージンをクリアします

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
  margin: 0;
  padding: 0;
}
复制代码

##### IEの低い高さのバージョン定義された不具合

一般的な要素は、要素のheightプロパティの高さは、高さを固定することができますが、IEの高さの低いバージョンで要素を固定することができない、要素の高さは、まだ軟化されたコンテンツを、注意を払う必要があります指定します。（同じ幅）

##### IE6はPNG透明度をサポートしていません。

フィルターとソリューション

#box{
  _background: none;
  filter: progid:DXImageTransForm.Microsoft.AlphaImageLoader(src='路径');
}
复制代码

##### Firefoxの幅の問題

ボディFirefoxブラウザは、混乱を防ぐために、特定のフロート要素サイズ、レイアウトに（その子要素を設定するために注意を払う、ピクセル他のブラウザの身体の幅よりも小さくなります。

##### IE6の問題を食い入るに

上下2つのアドレスDIVためIE6は、バックグラウンド、DIVの意志を有する背景上に設けられています。同様のオーバーフローがありますスクロール、スクロールバーが不完全に表示されたとき。1スタイル：スクロールバーと不完全divのプラスズームの最上部に、それぞれDIVする必要があります。

##### IE6の画像フォーマットの問題

画像フレーム内のIE6はデフォルトで存在し、除去均一であるべきです。同時に解決するために、フォントサイズで、絵の下に空洞があるだろう

img{
  border: none;
  font-size: 0;
}
复制代码

##### IEの1ピクセルの高さは、小さなボックスで定義することができません

19px以上のIE6の高さが空の要素は、4つのソリューションがあります。

オーバーフロー：エレメント3の空間に挿入された要素2に空のコメントを挿入する1は、CSSを加え;フォントサイズ：隠された4、CSSを加え0。

##### IE6のZインデックスの失敗

親要素のz-index属性が設定されている場合は、Zインデックスのサブ要素は失敗します。

##### IE6は常に選択のdivよりも高いです

浮動divの層が表示されたときに選択隠し、その後、とき浮動divの層の表示が消え選択します。

#####クロムフォントのサポートが12ピクセル未満でありましょう

#box{
  font-size: 8px;
  -webkit-text-size-adjust: none;
}
/* 但是，上面这个方法 chrome27 以后就不能用了。但我们可以用 css3 解决这个问题 */
#box{
  font-size: 12px;
  -webkit-transform: scale(0.75);
}
复制代码

#####のCSSハック

互換性プロパティは、書き込みの順序に注意を払う、設定されている：書き込み優先モードブラウザはハイグレードをサポートし、優先順位は、多くの方法をサポートしているブラウザを書きます

/*以 color 属性为例，注意书写顺序*/
#box{
  color: #f00;   //所有浏览器都支持
  color: #0f0 !important;   //只有 IE6 无效
  color: #00f\9;  //所有 IE 都有效
  color: #ff0\0;  //IE8+ 有效
  color: #f0f\9\0; //IE9+ 有效
  *color: #fff;  //仅 IE6, IE7 有效
  #color: #0ff;  //仅 IE6, IE7 有效
  +color: #800;  //仅 IE6, IE7 有效
  -color: #008;  //只有 IE6 有效
  _color: #080;  //只有 IE6 有效
}
复制代码

先に定義されたカバー定義プロパティので、上記の全ては、最終的な結果として提供されます。

IE6は＃080 IE7は、＃のF00などの他の＃0F0に＃800 IE8である＃FF0 IE9,10です

フロントエンドの互換性の問題の概要

おすすめ