那些年，前端路上遇到的瀏覽器兼容問題（一）

瀏覽器兼容！！！

每一個碼農內心的苦，對於前端來講，除了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

 

先到這吧~