各个浏览器兼容性问题积累

1、圆角边框


实例

向 div 元素添加圆角边框:

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

亲自试一试

页面底部有更多实例。

浏览器支持

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


2、设置背景图片的大小。

指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

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

兼容性:

类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)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透明度的问题
我们在写网页处理透明度问题时,
1、我们会考虑到用ps调透明度,保存为png格式。
2、不用图片时,我们可以用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;
	}这样就可以都兼容了。




原文地址:https://www.cnblogs.com/lpshan/p/4390763.html