ブラウザの互換性に関する問題
1、フローティングをクリアする場合、htmlコードを変更することなくafter擬似要素を使用するのが良い.cssの:afterは親コンテナの末尾にサブ要素を生成することができる.これにより、擬似要素にclear:bothを直接追加してフローティングをクリアすることができる.例えば(content:「」は末尾に空白文字を作成するか、height:0を加えてこの空白文字を表示しないことを意味する)、clearfixは親要素のクラス名である
これは、IE 6独自のコマンドzoom:1を追加するだけで、親コンテナのhasLayoutプロパティを刺激し、親要素に独自のレイアウトを持たせ、他のブラウザではこのコマンドを無視します.
互換性の書き方はこうです
2.ブラウザによってデフォルトのmarginとpaddingが異なり、ほとんどの互換性の問題です.
ソリューション:cssの先頭に追加
3.border:0とborder:none
ie 6,ie 7ではborder:0はborder-width:0,border:noneはborder-style:0と解析された.
標準ブラウザの下でborder:0はborderより1つ多くborder-width:0をレンダリングするので、メモリを最適化するために互換性のある書き方を書きました
border:0 none;(0はie 6、7、noneは標準ブラウザ)
4.vue.js互換性
Vue.jsは、Vueのため、IE 8および以下のバージョンをサポートしない.jsは,IE 8ではシミュレーションできないECMAScript 5特性を用いた.Vue.jsはECMAScript 5に対応するすべてのブラウザをサポートします.
.clearfix:after{
content:"";
display:block;
clear:both;
}
しかし:afterはIE 6でサポートされていません.どうすればいいですか.これは、IE 6独自のコマンドzoom:1を追加するだけで、親コンテナのhasLayoutプロパティを刺激し、親要素に独自のレイアウトを持たせ、他のブラウザではこのコマンドを無視します.
互換性の書き方はこうです
.clearfix:after{
content:"";
display:block;
clear:both;
}
.clearfix{
zoom:1;
}
2.ブラウザによってデフォルトのmarginとpaddingが異なり、ほとんどの互換性の問題です.
ソリューション:cssの先頭に追加
*{margin: 0;padding: 0;}
3.border:0とborder:none
ie 6,ie 7ではborder:0はborder-width:0,border:noneはborder-style:0と解析された.
標準ブラウザの下でborder:0はborderより1つ多くborder-width:0をレンダリングするので、メモリを最適化するために互換性のある書き方を書きました
border:0 none;(0はie 6、7、noneは標準ブラウザ)
4.vue.js互換性
Vue.jsは、Vueのため、IE 8および以下のバージョンをサポートしない.jsは,IE 8ではシミュレーションできないECMAScript 5特性を用いた.Vue.jsはECMAScript 5に対応するすべてのブラウザをサポートします.