几个常用的CSS3样式代码以及不兼容的解决办法
border-radius实现圆角效果
CSS3代码： -webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
background-color:#666;
width:200px;height:100px;
Firefox，Chrome Google，Safari等浏览器的显示效果如图0-0：
图0-0
但是IE这个异类不支持CSS3的这个属性，在IE9下的显示效果如图0-1：
图0-1
但是不能放任它不管，还是找办法解决这个兼容性问题。
解决方案：在CSS文件中通过behavior属性——这个属性只能被IE识别，引入一个htc文件, ie-css3.htc
这个是由Remiz Rahnas使用 VML 编写了一个 HTC 文件，为 IE 浏览器提供圆角效果的支持。
div{
-webkit-border-radius:10p;
-moz-border-radius:10px;
border-radius:10px;
background-color:#666;
width:200px;
height:100px;
color:#fff;
behavior: url(ie-css3.htc);
}
截两幅图看看效果，一幅来自IE6，一幅来自IE9：
注意:首先，在 Server 端需要引入一个 HTC 文件，经过 gzip 压缩后对 server 端和 client 端性能应该不会有太大的影响；其次，它会使你的 CSS 验证不合法；另外，这个脚本在 IE8 上有一些问题，它会使 z-index 值变成负数。因此使用时还需要小心.
box-shadow实现阴影效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
div img{
background-color: #fff;
-webkit-box-shadow:5px 5px 5px #000;
-moz-box-shadow:5px 5px 5px #000;
box-shadow:5px 5px 5px #000;
width:295px;
height:300px;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');
}
</style>
</head>
<body>
<div>
<img src="beautiful.jpg">
</div>
</body>
</html>
Chrome,Firefox,IE9下的效果显示:
接下来要做的事情，想必读者朋友都知道了，兼容IE6-8。首先想到的IE的滤镜。来看看效果吧。
加上滤镜之后的代码片段:
div img{
background-color: #fff;
-webkit-box-shadow:5px 5px 5px #000;
-moz-box-shadow:5px 5px 5px #000;
box-shadow:5px 5px 5px #000;
width:295px;
height:300px;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');
}
测试之后的效果，分别是IE5.5-IE8：
虽然差强人意，但凑合着用。如果有朋友知道除此之外的方法，能否告知一声，共同进步嘛！^_^
opacity实现透明度效果
div img{
width:295px;
height:300px;
-webkit-opacity:0.3;
-moz-opacity:0.3;
opacity: 0.3;
/*for IE 6,7,8*/
filter:alpha(opacity=30);
border:1px solid #ccc;
}
兼容IE 6,7,8。效果（来自IE6）：
transform:rotate(度数) 将元素旋转X度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
div { width:150px;
height:50px;
margin: 50px;
-webkit-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-ms-transform:rotate(7deg);
-o-transform:rotate(7deg);
transform:rotate(7deg);
border:1px solid #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
让我们来去W3C看看transform的兼容性:
以上代码已经实现了对以上浏览器及其版本的支持，但是IE6,7,8呢？俗话说，兵来将挡，水来土掩，山人自有妙计，只不过这妙计是借来的。
几个常用的CSS3样式代码以及不兼容的解决办法的更多相关文章
- pycharm自动调整html页面代码缩进不正确的解决办法
pycharm自动调整html页面代码缩进不正确的解决办法
- 出现“不能执行已释放的Script代码”错误的原因及解决办法
很多web开发者或许都遇到过这样的问题,程序莫名奇怪出现“不能执行已释放Script的代码”,错误行1,列1.对于这种消息描述不着边,行列描述更是让人迷茫的js错误,相信是所有调试js程序的朋友们最郁 ...
- 本地修改js代码并时时生效的解决办法
js作为客户端语言(当然它也可以作服务端语言),非常强悍,一般情况下,我们都是在开发阶段不停的改,然后上线之后就作为稳定运行的代码. 然而有时候可能因为js写得有问题,导致上线后,某些功能无法使用,这 ...
- MyEclipse 编写 JSP 代码时很卡的解决办法
在网上看到很多方法,都是尝试过,个人感觉都没有说到重点,所以收效甚微. 后来自己总结了一下: 我们都是习惯在MyEclipse 工具,双击jsp 文件打开进行编辑.这时,工具会打开窗口的 Previe ...
- 【原】ZenCoding中常用的CSS3样式
用ZenCoding这么久了,总结下常用CSS3的写法,方便以后查找: Property Alias @media print {} @m box-sizing:border-box; bxz:bb ...
- 出现蓝屏代码0x0000007b的原因及解决办法
出现蓝屏代码0x0000007b的原因通常是硬盘的存储控制器驱动加载错误,我们可以通过对BIOS界面进行修复来解决这个问题.下面小编将详细介绍解决蓝屏代码0x0000007b的方法,一起来看看吧 导致 ...
- 修改opencart extension插件代码后无法重新安装的解决办法
有时我们在为opencart安装一些插件后,发现有些地方需要细微的调整,然后去修改插件代码重新安装,但是却没有成功.开始有点怀疑是不是不能修改代码,但也不至于啊,不然开发者怎么制作插件.应该是哪里出了 ...
- PyCharm代码区不能编辑的解决办法
问题: 修改之前的Python代码时发现代码区无法编辑,无意中输入i后又可以编辑了. 解决: 原因是打开了工具中的vim Emulator编辑模式,把vim Emulator前面的勾取消即可.
- Eclipse修改java代码后自动重启Tomcat解决办法
今天甚是郁闷,项目马上要上线了,早上刚到公司打开MyEclipse 10.07提示过期提示,这对于用惯了破解软件的帝国用户的我原本以为小菜一碟. 于是到网上到处找破解软件,不用多长时间,Ok 破解成功 ...
随机推荐
- SELECT 场 FROM 表 WHERE 字段 Like 条件
间有关的条件,SQL它提供了四种匹配模式: 1.%: 表示随意0个或多个字符.可匹配随意类型和长度的字符.有些情况下若是中文,请使用两个百分号(%%)表示. 比方 SELECT * FROM [use ...
- /dev/shm（转）
引用网上:/dev/shm首先可以看出来/dev/shm是一个设备文件, 可以把/dev/shm看作是系统内存的入口, 可以把它看做是一块物理存储设备,一个tmp filesystem, 你可以通过这 ...
- ORM武器：NHibernate（三）五个步骤+简单对象CRUD+HQL
前面的两篇文章中.我们对NHibernate已经做了大致了解 <ORM利器:NHibernate(一)简单介绍>Nhibernate的作用:攻克了对象和数据库的转化问题 <ORM利器 ...
- 左右 Java 于 finally 深度分析语句块
首先,让我们来问你一个问题:finally 声明块将运行? 很多人认为 finally 语句块是一定要运行.其中还包括了一些非常有经验的 Java 程序猿.不幸的是,没有像很多像人们想象,对于这个问题 ...
- Repository、IUnitOfWork 和 IDbContext 的实践
Repository.IUnitOfWork 和 IDbContext 的实践 好久没写 DDD 领域驱动设计相关的文章了,嘎嘎!!! 这几天在开发一个新的项目,虽然不是基于领域驱动设计的,但我想把 ...
- （大数据工程师学习路径）第四步 SQL基础课程----SQL介绍及mysql的安装
一.数据库和SQL介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它的产生距今已有六十多年.随着信息技术和市场的发展,数据库变得无处不在:它在电子商务.银行系统等众多领域都 ...
- IP地址解析
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...
- B/S 类项目改善
B/S 类项目改善的一些建议 要分享的议题 性能提升:在访问量逐渐增大的同时,如何增大单台服务器的 PV2 上限,增加 TPS3 ? RESTful:相较于传统的 SOAP1,RESTful 风格 ...
- 接收一个IT招聘促销信息，试着想参加，有兴趣的可以携手并进，共同。
时隆重举行! 招聘的企业: (个人认为,中智.也买酒还是非常有吸引力的) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHdia2Zj/font/5a6L ...
- CentOS 7 下安装 LEMP 服务(nginx、MariaDB/MySQL 和 php)
原文 CentOS 7 下安装 LEMP 服务(nginx.MariaDB/MySQL 和 php) LEMP 组合包是一款日益流行的网站服务组合软件包,在许多生产环境中的核心网站服务上起着强有力的作 ...