ブラウザの互換性の問題については、我々は確かに、今日はこれらの地域CSS、携帯電話、コンピュータ、JS、HTMLからの話をいくつかのケースが発生します開発しました。
1、互換性のあるモバイルブラウザ。
Android携帯電話の新バージョンが現象を認識しませんだけで、電話でフレックスのレイアウトとの互換性の問題があるでしょう
.box{
display: -webkit-box;/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;/* 老版本语法: Firefox (buggy) */
display: -ms-flexbox;/* 混合版本语法: IE 10 */
display: -webkit-flex;/* 新版本语法: Chrome 21+ */
display: flex;/* 新版本语法: Opera 12.1, Firefox 22+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解决兼容性问题*/
}
输入框的兼容性解决
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/*手机上的line-height不能写成和height的值一样，会出现再次输入光标靠上的现象*/
background: none;
font-size: 0.32rem;
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/
}
禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;/*这样就可以用class自定义样式*/
}
webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
手机上的多行省略
.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第几行出现省略号*/
/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}
テキストラベルの行の高さ：1行の高さやテキストに等しい高さはカットされます
電話でのフロートは、広い幅を書くために書いてみる番号がコンテンツを固定されていないため、それ以外の場合は、高い書き込みしないようにしよう、互換性の問題を起こしやすいです
特定のスタイルを備えた携帯電話の異なる画面サイズに
@mediaのみ画面と（MIN-デバイス -width：320ピクセル）と（MAX-デバイス幅：375px）{}
要素のtype属性を含めるようにしてくださいまたはフォームが送信されるデフォルト設定されます、予期せぬバグの出現
いくつかのAndroid携帯電話には、中国語の文字を入力していないにつながるonkeyupのイベントONKEYPRESS onkeydownを認識していないブラウザが付属しています
テキスト入力ボックスを入力したくない場合は、読み取り専用が、読み取り専用プロパティを追加することができ書き込めませんすることができます
位置決め背景効果の動きをもたらすために必要であれば、電話機の背景の動きを記述する、REM basckgroundサイズを加算することによって計算することができる：* 100％図番号0。
図2は、互換性のあるHTML
IE9ブラウザで1.H5新しいタブには、次を識別します
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.jsダウンロード
https://github.com/aFarkas/html5shiv/releases
2.ulラベルの内側と余白発行ULタグIE6 \ IE7の外側には、デフォルトの余白がありますが、IE8と他のブラウザの上にデフォルトのパディングがあります。ソリューション：0の内部および外部のULマージンの統一セット
3、CSSスタイルの互換性
1.css問題をハック：IEの異なるバージョンのメインは、異なるブラウザ文言異なる
条件がIEのコメントをハック：
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
2.IE6両側問題から：IE6フローティング後、横方向の余裕を持って、この時点で、要素の外側からの2倍の値で
表示：溶液ブロック。
画像3.IE6の下部にギャップが存在する
ディスプレイへIMGセット：ソリューションブロック。
2つのfloatの間4.IE6下でのバグ3pxになります
解決策を：右の要素はまた、フロート設定する：左;
最小幅のデフォルトの幅である最小幅5.IE6、の概念はありません
;中央にできない0オート：6.IE6の下マージン使用して
設定し、その親コンテナのテキスト揃え：ソリューションセンターを。
プロパティは、もはやホバーとアクティブではありません後7ハイパーリンクがクリックされた
ソリューション：CSSスタイルを書いlvhaため、
「：リンク」：タグの状態がアクセスされていない;
「：訪問」：タグが訪問された状態;
「：ホバー」：ラベルに状態を置き;
「：アクティブ」：タグマウスを押した状態。
使用絶対位置または相対位置は、IEのz屈折率が不良に設定された後、ガオが低い、親が親要素、親要素のz屈折率の要素に依存するが、デフォルトは0であるため、8は、理由があるので、表示を変更しないであろうオーダー
9.IE6は、1ピクセル高いラインに設定することができないので、高いへデフォルトで行
溶液：三組オーバーフロー：隠された;または行の高さ：1ピクセル。
4、JavaScriptの互換性
1.標準的な方法イベントバインディング関数のaddEventListenerが、IEはattachEventあります。
2.キャプチャイベント、外部から内部への標準ブラウザと矛盾するようにして、IEは内部から外部にあるが、最終結果は標準のような標準的なIEであります
3.window.eventを取得します。そして、異なるターゲット要素法、標準ブラウザのevent.target、下IEですevent.srcElementを取得
差分値1900ではなく、IEの高いバージョンでかつ一貫した標準的なブラウザを維持するために、差分値が得られ、日付1900はIEハンドラの低い4バージョンで取得されます。
たとえば、次のVAR年=新しいDate（） getYearメソッド（）;.
5.ajax異なる実装、私はこれは違うのXMLHttpRequestを取得することで理解し、次のIEはActiveXオブジェクトであります
Trの6.IEは、DOMを操作することはできません異なる方法でinnerHtml7親ノード、子ノードを取得した。
その他のブラウザ：のparentNode parentNode.childNodes
のIE：parentElement parentElement.childrenを