1.瀏覽器不支援該特性

解決方法

不同瀏覽器使用不同的樣式
[email protected]
查詢瀏覽器是否支援該屬性，相容性不是很好，一般不適用
2.瀏覽器hack原理-層疊

• 同一個屬性，後面書寫的值覆蓋前面書寫的值
• 對瀏覽器無效的屬性值會被忽略

3.條件註釋
IE6到IE9適用，針對某一種瀏覽器寫特殊的CSS
4.瀏覽器怪癖

• IE6不支援兩個類選擇器直接組合，兩個類選擇器組合時，IE6只會識別後一個。
• IE6中可以忽略屬性名前面加下劃線
• IE6和IE7忽略屬性名前的*
• IE6-8不支援:root選擇器
• IE8支援屬性值後面加”\9”

CSS3選擇器相容性問題

• CSS3中的大部分選擇器相容性是IE9+
• 例如：:target，:empty，:nth-child，:nth-of-type，:checked，:disabled無法在IE6-8使用
• 移動端支援絕大多數CSS3選擇器
• IE8不支援的屬性：
  background-size(IE8及以下使用固定寬度佈局)
  border-radius
  box-shadow
  opcity（可以使用filter:alpha(opacity=50)）
  rgba、hsl、hsla
  rem、vh、vw、calc（降級為固定寬度）
• IE9不支援的屬性：
  transition和animation

2.某些特定條件下觸發瀏覽器bug

• IE6下半透明png顯示不正確（使用filter或者使用DD_belatedPNG.js）
  

• IE6浮動雙邊距
  浮動元素與浮動同方向的邊距加倍（使用display:inline）
  

• hasLayout:true
  如果haslayout沒有被設定成true，那麼元素得依靠某個祖先元素來渲染它
  zoom:1激發元素的hasLayout屬性來使元素擁有佈局
• IE模式
  瀏覽器模式：切換渲染引擎、javascript引擎和HTTP請求的UserAgent
  文字模式：切換文件模式，即渲染引擎和javascript引擎