一、首先你要知道的是兼容是哪些問題
前端兼容性問題分三類：
- 瀏覽器兼容問題
- IE6、7、8不支持HTML5、CSS3、SVG標準，可被判定為“極難兼容”
IE9不支持Flex、Web Socket、WebGL，可被判定為“較難兼容”
IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定為“較易兼容”
IE11部分支持Flex、WebGL，可被判定為“較易兼容”
IE6、7、8、9可視為“老式瀏覽器”
IE10、11可視為“準現代瀏覽器”
Chrome、Firefox、Safari、Opera 、Edge可視為“現代瀏覽器” - 螢屏分辯兼容問題
- 在不同的螢屏解析度，瀏覽器頁面展示差異很大，特別是螢屏解析度較小時，容易發生布局錯亂，為了解決這個問題，回應式UI框架應運而生
- 跨平臺兼容問題
- 隨著移動和平板市場的日益發展，Web在桌面、平板、移動平臺上的兼容性問題日益突出，由于移動和平板是觸摸式操作，與桌面的滑鼠操作方式有很大差異，因此在不同平臺上要做相應修改，為了解決這個問題，誕生了跨平臺框架，在不同平臺上，外觀、布局、操作都有差異化修改
二、常備兼容性問題
1、不同瀏覽器的標簽默認的外邊距和內邊距不同
問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大，
解決方案：css里 {margin:0;padding:0;}
注釋：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css檔案開頭都會用通配符來設定各個標簽的內外邊距是0，
2、圖片默認有間距
問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加上問題一中提到的通配符也不起作用，
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距，去掉這個間距使用float是正道
3、使用after偽元素清除法（也稱之為萬能清楚法）
.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、鏈接訪問過后hover樣式就不出現的問題
a:link {}
a:visited {}
a:hover {}
a:active {}
歡迎大家進群進行技術性的探討， 群號：954314851
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/125058.html
標籤：其他
上一篇：HTML總結