浏览器兼容的几点思路

想到哪里写到哪里

一、兼容性避免无样式展现:

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 英文的,貌似在解释原理。




原文地址:https://www.cnblogs.com/monozxy/p/9530825.html