浏览器兼容的几点思路
想到哪里写到哪里
一、兼容性避免无样式展现:
1. 利用css的覆盖性
例子:
渐变问题:
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/ background:red; /* 一些不支持背景渐变的浏览器 */ 写在其他浏览器前边,如果后方支持渐变就会自动覆盖 background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
通用样式写在前边,后边写各版本支持样式,确保样式会覆盖;
2.解决chrome小于12px的字不改变字号的问题
-webkit-transform-origin-x: 0;//解决偏移问题
-webkit-transform: scale(0.9); //缩放0.9
3.font awesome在火狐浏览器不显示的问题
简单查了一下,先做个记录,有时间再看。
https://www.oschina.net/question/2457218_2205005?sort=time
https://my.oschina.net/u/2457218/blog/782822
https://bugzilla.mozilla.org/show_bug.cgi?id=760436 英文的,貌似在解释原理。