那些年，前端路上遇到的浏览器兼容问题（一）

浏览器兼容！！！

每一个码农内心的苦，对于前端来讲，除了js即是浏览器这磨人的小妖精了

这个系列就整理一下学习前端一年多以来遇到的或积累的浏览器兼容性问题~

 

排名不分前后

1.chrome最小字体不能小于12px

这个问题是在使用rem的时候发现的，chrome会默认将小于12px的字体以12px呈现。按道理，通常咱们不会讲字体设置小于12px。

 

然而，使用rem的时候，通常会将html的font-size设置为62.5%。

html{
	font-size: 62.5%;	/*浏览器默认的字体大小为16px，设置为62.5%便是10px*/
}
div{
	font-size: 2.4rem;	/*此时div的字体大小为24px，rem是基于html做为基数的字体计数单位*/
}

如下为Chrome浏览器

如下为FF

很明显能够看得出来区别了。

对于解决这个方法，通过搜索以后获得的即是在html下加一个css属性。

html{
	font-size: 62.5%;	/*浏览器默认的字体大小为16px，设置为62.5%便是10px*/
　　　　　-webkit-text-size-adjust:none;
}
div{
	font-size: 2.4rem;	/*此时div的字体大小为24px，rem是基于html做为基数的字体计数单位*/
}

然而因为此属性在Chrome 27.0版本以上无效。

便有了另一个方法，使用css3里的一个属性：transform:scale()（及其不推荐！！！）

该属性是对元素进行了缩放，带来的问题远远大于字体大小。

至于解决方法，若是是为了测试移动端页面的浏览效果，就在设置那里将最小字体调到10px。

 

2.IE盒模型

以上为盒模型

W3C标准中，元素的width&height默认是 content的width&height。

在IE5.5如下的浏览器版本中，元素的width&height默认是 padding+border+content的width&height。

这个点其实不算兼容性了，IE6已经狗带了是吧。IE6如下又是什么鬼，总之就了解一下吧，顺带引出下面的一个点。

box-sizing

box-sizing是一个css3属性，有三个值

content-box（默认）　　规定元素的宽高为w3c标准盒模型宽高

border-box　　　　　　　规定元素宽高为padding+border+content的width&height，即上面提到的IE盒模型

inherit　　　　　　　　  继承父元素

该属性在布局的时候为咱们提供了便利，好比我须要规定该div的宽为200px,可是我又必须为他加一个10px的padding，若是是默认的盒模型下，元素的宽度便会超过20%，若是咱们将其设置为border-box，便不用麻烦的去计算width了。

该属性IE8如下不兼容

Element {
     -moz-box-sizing: content-box;  　　//for old FF
     -webkit-box-sizing: content-box;  //for old webkit
     -o-box-sizing: content-box;  　　 //for old Opera
     -ms-box-sizing: content-box; 　　 //for IE8
     box-sizing: content-box; 　　　　　//standard
  }

　　

3.css的opacity属性及css3的rgba属性的透明度兼容

opacity是很经常使用的一个属性，其做用是对元素进行透明度的处理，兼容性写法以下

 Element{
2  filter:alpha(opacity=50);    /*for old IE */
3  -moz-opacity:0.5;              /* for old Mozilla */
4  -khtml-opacity:0.5;           /*for old Safari */
5  opacity: 0.5;                     /* atandard*/
6 }

下面说一下rgba，rgb你们应该都知道，分别对应颜色值red,green,blue，a是指alpha。该属性详细的能够连接 http://www.w3cplus.com/content/css3-rgba，来自大漠前辈的。

图片引用自上文的连接，说明了二者的区别。

rgba属性主要的兼容性在ie下

.rgba {
  background: rgb(0,0,0); /*The Fallback color,这里也可使用一张图片来代替*/
  background: rgba(0, 0, 0,0.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
 }

上面代码一样来自文章，十分建议看一下。

4.z-index

这个属性平时遇到的问题就是须要对元素加上一个定位的除static以外的position属性值，以后z-index才会生效。深层的缘由跟元素堆叠有关系，待学习。

至于IE6的兼容问题，这篇写的很详细了。http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html

5.不一样浏览器默认样式不一样

一开始写页面的时候，常常会看到*{ margin: 0; padding: 0}

这是对于浏览器样式的一个重置，这也算是一个浏览器兼容的问题吧~

因为不一样浏览器对于一些元素的默认设置各不相同，因此通常咱们会设置一套重置样式，方便咱们接下来的样式设置。

推荐normalize.css，详情能够看一下个人另外一篇博文 http://www.cnblogs.com/ellenwu/p/4946964.html

 

先到这吧~