前端面試必備的所掌握的相容問題

一、首先你要知道的是相容是哪些問題

前端相容性問題分三類：

• 瀏覽器相容問題
• 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