资源描述：
《解决css兼容性问题》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、解决CSS兼容性问题如果你经常使用CSS3实现一些炫酷的效果，比如使用transition实现让一个div慢慢变宽的动效，你一定会为了兼容各个高级浏览器而这样写你的CSS代码：1.#box{2.width:200px;3.height:200px;4.-moz-transition:all2sease0s;5.-webkit-transition:all2sease0s;6.-o-transition:all2sease0s;7.}8.#box:hover{9.width:800px;10.}复制代码在InternetExplo
2、rer10上你也可以使用CSS3实现这个效果了，只需要为#box添加一行代码：-ms-transition:all2sease0s;下面列举出几个典型的需要兼容InternetExplorer10的CSS3特性：1.3D转换InternetExplorer10和Windows8中使用JavaScript的ModernUI风格的应用引入了对CSS33D转换的支持。InternetExplorer9增加了对CSS32D转换的支持，使用JavaScript的ModernUI风格的应用也同样支持它们。转换支持包括变换、旋转以及2D和3D
3、空间中的元素拉伸，这些转换无需插件。为了实现CSS转换，需要使用-ms-transform属性定义一个或多个转换函数。例如，以下代码段是一个选择器，它将一个2D偏移函数和一个3D旋转函数同时应用于一个div元素。1.div{2....3.-ms-transform:skew(-45deg,15deg)rotate3d(0.7,0.8,0.4,55deg);4.}复制代码这将得到以下图像：2012-10-2513:30上传下载附件(184.6KB)关于CSS33D转换、转换函数以及如何实现它们的更多信息，请参阅：“3-D转换”（h
4、ttp://go.microsoft.com/fwlink/p/?LinkId=238295）。关于CSS33D转换的实际操作，请访问IETestDrive（http://go.microsoft.com/fwlink/p/?LinkID=196941）站点上的“动手实验：3D转换”（http://go.microsoft.com/fwlink/p/?LinkId=227893）。2.过渡InternetExplorer10和使用JavaScript的ModernUI风格的应用支持CSS3过渡特效。通过过渡特效，可以实现简单的动
5、画效果，在一小段时间内平滑地改变CSS的属性值。例如，在10秒钟内改变一个对象的大小和颜色。以前需要通过CSS和JavaScript的复杂组合操作实现的效果，现在只需几行CSS代码即可完成。关于CSS3过渡的实际操作演示，请参见IETestDrive（http://go.microsoft.com/fwlink/p/?LinkID=196941）站点上的“动手实验：过渡”（http://go.microsoft.com/fwlink/p/?LinkId=227781）。以下是一个完整的简单CSS过渡的示例，关于这个示例的更全面的
6、解释，以及所有过渡属性，请参见“过渡”（http://go.microsoft.com/fwlink/p/?LinkId=238302）。1.2.3.4.5.body{6.padding:10px;7.font:bold20pt"SegoeUI";8.}9.div{10.width:250px;11.background-color:lime;12.padding:10px;13.opacity:1;14.-m
7、s-transition:opacity5slinear1s;1.}2.div:active{3.opacity:0;4.}5.6.7.
8.
9.Duisacleositametlectustristiquepulvinarnecrutrumdolor.10.Etiamsedipsumenim,vitaeeuismododio.Suspendisseeu.11.
12.13.
