CSS中的兼容性问题

1.浏览器不支持该特性

解决方法

不同浏览器使用不同的样式
1.@supports
查询浏览器是否支持该属性，兼容性不是很好，一般不适用
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引擎