1.知っておくべき最初のことは互換性の問題です
フロントエンドの互換性の問題は、次の3つのカテゴリに分類されます。
- ブラウザーの互換性の問題
- IE6、7、および8はHTML5、CSS3、SVG標準を
サポートせず、「互換性が非常に難しい」と判断できますIE9はFlex、Webソケット、WebGLをサポートせず、「互換性が難しい」と判断できます
IE10は部分的にFlexをサポートします（-ms- flexbox）、Webソケット、「簡単互換」と判断できる
IE11はFlexを部分的にサポート、WebGL、「簡単互換」と判断
できる
IE6、7、8、9は「古いブラウザ」と見なすことができるIE10、11が利用可能「準近代的なブラウザ」と見なされる
Chrome、Firefox、Safari、Opera、Edgeは「近代的なブラウザ」と見なすことができます - 画面解像度の互換性の問題
- 異なる画面解像度では、ブラウザのページ表示は大きく異なります。特に画面解像度が小さい場合、レイアウト乱れが発生しやすくなります。この問題を解決するために、レスポンシブUIフレームワークが生まれました
- クロスプラットフォーム互換性の問題
- モバイルおよびタブレット市場の発展に伴い、デスクトップ、タブレット、およびモバイルプラットフォームでのWebの互換性がますます顕著になっています。モバイルとタブレットはタッチベースの操作であるため、デスクトップのマウス操作とは大きく異なり、対応する変更を異なるプラットフォームで行う必要があります。この問題を解決するために、クロスプラットフォームフレームワークが誕生しました。プラットフォームが異なると、外観、レイアウト、操作がそれぞれ異なるように変更されました。
2つ目は、互換性の問題です。
1.ブラウザーごとにデフォルトの外側マージンと内側マージンが異なる
症状：いくつかのラベルをスタイルコントロールなしでランダムに書き込みます。それぞれのマージンとパディングはまったく異なります。
解決策：cssの{margin：0; padding：0;}
注：これは最も一般的で最も簡単なブラウザー互換性の問題です。ほとんどすべてのcssファイルはワイルドカードを使用して各ラベルの内側と外側を最初に設定します距離は0です。
2.画像にデフォルトの間隔の
症状があります。複数のimgタグを組み合わせた場合、一部のブラウザーにはデフォルトの間隔があり、最初の質問で述べたワイルドカードは機能しません。
解決策：float属性を使用してimgをレイアウトします。
注：imgタグはインライン属性タグであるため、コンテナーの幅を超えない限り、imgタグは一列に配置されますが、一部のブラウザーのimgタグの間にスペースがあります。これは、このギャップを削除してフロートを使用するための正しい方法です
3.疑似要素の削除後に使用する方法（ユニバーサルクリアメソッドとも呼ばれます）
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
4.表示の省略記号を超える
select {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
width:200px;
}
5.リンクにアクセスした後、ホバースタイルが表示されない
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
技術的なディスカッションのためにグループに参加することを歓迎します。グループ番号：954314851
