解决CSS兼容性问题.docx

解决CSS 兼容性问题如果你经常使用CSS3 实现一些炫酷的效果，比如使用 transition 实现让一个div 慢慢变宽的动效，你一定会为了兼容各个高级浏览器而这样写你的CSS 代码：1. #box 2. width: 200 px;3. height: 200 px;4. -moz-transition: al l2s ease 0s;5. -webkit-transition: all 2s ease 0s;6. -o-transition: all 2s ease 0s;7. 8. #box:hover 9. width: 800 px;10. 复制代码在 Internet Explorer 10 上你也可以使用 CSS3 实现这个效果了，只需要为#box 添加一行代码：-ms-transition: all 2s ease 0s;下面列举出几个典型的需要兼容 Internet Explorer 10 的CSS3 特性：1. 3D 转换Internet Explorer 10 和 Windows 8 中使用 JavaScript 的 Modern UI 风格的应用引入了对 CSS3 3D 转换的支持。Internet Explorer 9 增加了对 CSS3 2D 转换的支持，使用JavaScript 的 Modern UI 风格的应用也同样支持它们。转换支持包括变换、旋转以及2D 和3D 空间中的元素拉伸，这些转换无需插件。为了实现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-25 13:30 上传下载附件 (184.6 KB)关于CSS3 3D 转换、转换函数以及如何实现它们的更多信息，请参阅：“3-D 转换”（/fwlink/p/?LinkId=238295）。关于CSS3 3D 转换的实际操作，请访问IE Test Drive（/fwlink/p/?LinkID=196941）站点上的“动手实验：3D 转换”（/fwlink/p/?LinkId=227893）。2. 过渡Internet Explorer 10 和使用 JavaScript 的 Modern UI 风格的应用支持 CSS3 过渡特效。通过过渡特效，可以实现简单的动画效果，在一小段时间内平滑地改变 CSS 的属性值。例如，在10秒钟内改变一个对象的大小和颜色。以前需要通过 CSS 和 JavaScript 的复杂组合操作实现的效果，现在只需几行 CSS 代码即可完成。关于CSS3 过渡的实际操作演示，请参见IE Test Drive（/fwlink/p/?LinkID=196941）站点上的“动手实验：过渡”（/fwlink/p/?LinkId=227781）。以下是一个完整的简单CSS 过渡的示例，关于这个示例的更全面的解释，以及所有过渡属性，请参见“过渡”（/fwlink/p/?LinkId=238302）。1. 2. 3. 4. 5. body 6. padding:10px;7. font:bold 20pt Segoe UI;8. 9. div 10. width:250px;11. background-color:lime;12. padding:10px;13. opacity:1;14. -ms-transition:opacity 5s linear 1s;15. 16. div:active 17. opacity:0;18. 19. 20. 21. 22. 23. Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.24. Etiamsedipsumenim, vitae euismododio.Suspendisseeu.25. 26. 27. 复制代码在这个示例中，属性-ms-transform 被设置为“opacity 5s linear 1s”。借助于：active伪类，当单击（或触摸）并按住柠檬绿色的div，它将慢慢消失。特别地，它的opacity 属性在1 秒之后，会产生平滑的过渡效果（使用一个线性计时函数），在5 秒之内从完全不透明变为完全透明。请参见这个页面（/fwlink/p/?LinkId=227845）。1. -ms-transform 属性是一个简写属性，这个声明也可以使用以下属性来替代：2. -ms-transition-property:opacity;3. -ms-transition-duration:5s;4. -ms-transition-timing-function:linear;5. -ms-transition-delay:1s;复制代码关于CSS 过渡的更多功能，请参见“过渡”（/fwlink/p/?LinkID=238302）。3. 动画Internet Explorer 10 和使用 JavaScript 的 Modern UI 风格的应用支持 CSS3 动画。利用CSS3动画，可以创建具有炫酷视觉效果的应用程序，实现平滑流畅的动画效果。只需3个基本步骤即可创建动画：指定动画属性，创建关键帧，将动画应用于一个或多个元素。动画类似于过渡，都是通过改变元素的位置、大小、颜色和透明度，并通过旋转、位伸、变换等操作来实现动画。像使用过渡效果一样，可以指定计时函数来控制动画的前进速度。但是，利用CSS3 动画，我们还可以使用关键帧，它指定了动画的各个时间点的属性值。这样，我们不仅可以定义动画起始和结束的行为，而且还可以定义在开始和结束之间的行为。动画还具有迭代和反转方向的功能，还可以暂停和恢复播放。关于CSS3 动画的实际操作演示，请参见IE Test Drive（/fwlink/p/?LinkID=196941）站点上的“动手实验：动画”。（/fwlink/p/?LinkId=228082）以下是一个简单的CSS 动画的完整示例。关于这个示例的更全面的解释，以及所有动画属性，请参见“动画”（/fwlink/p/?LinkId=238298）。1. 2. 3. 4. 5. body 6. padding: 10px;7. font-family: Segoe UI;8. 9. div /* 定义动画的 div */10. width: 250px;11. background-color: lime;12. padding: 10px;13. font-weight: bold;14. font-size: 20pt;15. 16. div:active /* 定义动画参数 */17. -ms-animation-delay: 0s;18. -ms-animation-duration: 5s;19. -ms-animation-iteration-count: 2;20. 1221. -ms-animation-name: demo;22. 23. -ms-keyframes demo /* 定义动画的关键帧*/24. from 25. -ms-animation-timing-function: ease;26. 27. 50% /* 使用ease 计时函数*/28. background-color: purple; /* 来移动和更改div 的颜色*/29. -ms-animation-timing-function: ease-in;30. -ms-transform: translate(20px,30px);31. 32. to 33. background-color: blue; /* 使用ease 计时函数将div 更改为蓝色*/34. 35. 36. 37. 38. 39. CSS3 Animations Example40. Click and hold to start the animation. Internet Explorer 10 or later41. required.42. 43. Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.44. Etiamsedipsum enim, vitae euismododio. Suspendisseeu.45. 46. 47. 复制代码这段标记代码的示例定义了两个动画属性：background-color 和-ms-transform。在动画的一个循环周期中，div 元素的背景颜色由柠檬色（初始颜色）变为紫色，然后又变为蓝色。div 元素还向右和向下分别移动20 像素和30 像素，然后还原。这个动画使用了ease 计时函数从开始过渡到中间点（关键帧为50%），然后使用ease-in 计时函数从中间点过渡到结束。动画重复了一次。观看这个动画（/fwlink/p/?LinkId=228195）（要求Internet Explorer 10）。正如所期望的，CSS3 动画提供了无限的可能性，我们可以利用它来创建丰富、炫酷的动画。并且也可以帮助我们更好的优化网站，减少不必要的代码，更多内容可以参阅IE10兼容性白皮书，获得更多的帮助，下载地址：/s/bKgeq关于如何在Internet Explorer 10 和使用JavaScript 的Metro 风格应用中创建CSS 动画的概述，以及CSS3 动画的实际使用示例，请参见“动画”（/fwlink/p/?LinkId=238298）。关于CSS3 动画的操作演示，请访问IE Test Drive（/fwlink/p/?LinkID=196941