IE10相关简单几步，让你的网站兼容IE10（第二弹！） - 德化论坛

解决CSS 兼容性问题

如果你经常使用CSS3 实现一些炫酷的效果，比如使用 transition 实现让一个div 慢慢变宽的动效，你一定会为了兼容各个高级浏览器而这样写你的CSS 代码：

#box {

width: 200 px;

height: 200 px;

-moz-transition: al l2s ease 0s;

-webkit-transition: all 2s ease 0s;

-o-transition: all 2s ease 0s;

}

#box:hover {

width: 800 px;

}

在 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 元素。

div {

...

-ms-transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg);

}

这将得到以下图像：

关于CSS3 3D 转换、转换函数以及如何实现它们的更多信息，请参阅：“3-D 转换”（https://go.microsoft.com/fwlink/p/?LinkId=238295）。

关于CSS3 3D 转换的实际操作，请访问IE Test Drive（https://go.microsoft.com/fwlink/p/?LinkID=196941）站点上的“动手实验：3D 转换”（https://go.microsoft.com/fwlink/p/?LinkId=227893）。

2. 过渡

Internet Explorer 10 和使用 JavaScript 的 Modern UI 风格的应用支持 CSS3 过渡特效。通过过渡特效，可以实现简单的动画效果，在一小段时间内平滑地改变 CSS 的属性值。例如，在10秒钟内改变一个对象的大小和颜色。以前需要通过 CSS 和 JavaScript 的复杂组合操作实现的效果，现在只需几行 CSS 代码即可完成。

关于CSS3 过渡的实际操作演示，请参见IE Test Drive（https://go.microsoft.com/fwlink/p/?LinkID=196941）站点上的“动手实验：过渡”（https://go.microsoft.com/fwlink/p/?LinkId=227781）。以下是一个完整的简单CSS 过渡的示例，关于这个示例的更全面的解释，以及所有过渡属性，请参见“过渡”（https://go.microsoft.com/fwlink/p/?LinkId=238302）。

<!DOCTYPE html>

<htmllang="en-us">

<head>

<style type="text/css">

body {

padding:10px;

font:bold 20pt "Segoe UI";

}

div {

width:250px;

background-color:lime;

padding:10px;

opacity:1;

-ms-transition:opacity 5s linear 1s;

}

div:active {

opacity:0;

}

</style>

</head>

<body>

<div>

Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.

Etiamsedipsumenim, vitae euismododio.Suspendisseeu.

</div>

</body>

</html>

在这个示例中，属性-ms-transform 被设置为“opacity 5s linear 1s”。借助于：active伪类，当单击（或触摸）并按住柠檬绿色的div，它将慢慢消失。特别地，它的opacity 属性在1 秒之后，会产生平滑的过渡效果（使用一个线性计时函数），在5 秒之内从完全不透明变为完全透明。请参见这个页面（https://go.microsoft.com/fwlink/p/?LinkId=227845）。

-ms-transform 属性是一个简写属性，这个声明也可以使用以下属性来替代：

-ms-transition-property:opacity;

-ms-transition-duration:5s;

-ms-transition-timing-function:linear;

-ms-transition-delay:1s;

关于CSS 过渡的更多功能，请参见“过渡”（https://go.microsoft.com/fwlink/p/?LinkID=238302）。

3. 动画

Internet Explorer 10 和使用 JavaScript 的 Modern UI 风格的应用支持 CSS3 动画。利用CSS3动画，可以创建具有炫酷视觉效果的应用程序，实现平滑流畅的动画效果。