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

2024-06-01 07:15:01

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

兼容性：

类型	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透明度的问题

我们在写网页处理透明度问题时，

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

各个浏览器兼容性问题积累相关推荐

web前端关于浏览器兼容性
web前端关于浏览器兼容性所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登 ...
超实用web前端开发工具推荐（web开发+前端性能优化+浏览器兼容性测试+……）
要说有哪些好用的前端开发软件和工具,我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具.今天我就从浏览器兼容性测试工具.web开发工具.前端性能优化工具.大数据可视化工具这四个方向来和大家 ...
如何解决浏览器兼容性问题
我只是写一写给自己长个记性和经验而已,嘿嘿. 浏览器兼容性问题是比较难解决的.主要是由浏览器内核的不同而引起的,所以对有的关键字支持不是很好. 为了应付浏览器兼容性问题,写完一个小模块的代码,就对需要 ...
介绍几款浏览器兼容性测试工具
昨天和朋友聊到了有关浏览器兼容性的问题,在开发中有时的确很让人苦恼,我向他推荐了几款测试浏览器兼容的工具,分享给大伙,有什么更好的工具或是解决方法还希望大家拿出来晒一晒. IETester 这是我最先 ...
如何在使用新技术前评估其浏览器兼容性
这里向大家推荐两个网站:caniuse.com以及html5test.com,大家在使用新技术前,可以在这两个网站上看看浏览器的支持情况,看看自己能不能接受,同时也考虑一下能不能优雅降级. caniu ...
47种常见的浏览器兼容性问题大汇总
浏览器兼容性问题大汇总 Ø JavaScript 3 1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.hr ...
html 布局兼容性,HTML+CSS入门浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同问题现象: ...
再谈浏览器兼容性测试
今天跟大家聊一个老生常谈的话题:浏览器兼容性测试. 测试国内网站的同学是不是已经非常头疼了,因为面对的浏览器除了国际大牌如IE, Chrome, Firefox, Opera, Safari, 还有国 ...
CSS设置透明边框解决浏览器兼容性问题
设置透明边框的代码其实很简单,就只有一行,但是有时候很实用. border: 1px solid transparent; 有时间,你既需要边框不为0, 又不希望看到边框, 这个时候,它就起到作 ...
CSS实现跨浏览器兼容性的盒阴影效果
2019独角兽企业重金招聘Python工程师标准>>> CSS实现跨浏览器兼容性的盒阴影效果一.无关紧要碎碎念在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了. ...

最新文章

热门文章