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

浏览器兼容！！！

每个码农心里的苦，对于前端来说，除了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

先到这吧~