各個瀏覽器兼容性問題積累

一、圓角邊框

實例

向 div 元素添加圓角邊框：

div
{
border:2px solid;
border-radius:25px;
}

親自試一試

頁面底部有更多實例。

瀏覽器支持

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。

二、設置背景圖片的大小。

指定背景大小，以象素或百分比顯示。當指定爲百分比時，大小會由所在區域的寬度、高度，以及background-origin的位置決定。還能夠經過cover和contain來對圖片進行伸縮。

引擎類型	Gecko	Webkit	Presto
Background-size		-webkit-background-size	-o-background-size

兼容性：

類型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(√)Opera 9.63	(√)Safari 3.1
	(×)IE7	(×)Firefox 3.0	(√)Chrome 2.0.x		(√)Safari 4
	(×)IE8	(×)Firefox 3.5

3.CSS透明度的問題

咱們在寫網頁處理透明度問題時，

一、咱們會考慮到用ps調透明度，保存爲png格式。

二、不用圖片時，咱們能夠用css樣式，

用下面的樣式表定義你的層

.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝

解釋：

Opacity=開始的不透明度(100的話就不透明瞭)

FinishOpacity=結束的不透明度(100的話就不透明瞭)

Style=樣式，從0開始，1.2.3....有均勻透明啊，放射形狀透明啊...

StartX=開始透明的X座標，基本上爲圖片、層的左上角（0）

StartY= 開始透明的Y座標，基本上也爲圖片、層的左上角（0）

FinishX=結束透明的X座標，基本上也圖片、層的右下（圖片、層的寬度）

FinishY=結束透明的Y座標，基本上也爲圖片、層的右下角（圖片、層的高度）

固然若是隻寫opacity：0.7，兼容火狐和谷歌，在IE裏就無效果了，此時能夠這樣寫：

	IE：filter:alpha(opacity=60)     FireFox：-moz-opacity: 0.6      Chrome：opacity: 0.6	

.test{
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}這樣就能夠都兼容了。