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引擎