Win10 正式版 系统 下载 主题 平板

重定义Modern UI,打造完美Windows全新体验

Windows10下载|安装|新手宝典|必备软件

远景论坛 - 微软极客社区 › 论坛 › 全新 Windows 论坛 - 微软全新一代操作系统 › Windows 进阶技术 > 【吐血整理分享】IE10相关简单几步，让你的网站兼容IE10 ...

12 3 下一页

返回列表发表新帖

查看: 29338|回复: 50

[技术] 【吐血整理分享】IE10相关简单几步，让你的网站兼容IE10（第二弹！） [复制链接]

灰兔纸是Geek

Rank: 5 Rank: 5 Rank: 5

UID: 2998065
帖子: 152
PB币: 817
贡献: 0
技术: 0
活跃: 21

发表于 2012-10-25 13:21:47 IP属地江苏 |显示全部楼层

本帖最后由 eugene2candy 于 2012-10-25 13:30 编辑

【吐血整理分享】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 转换”（http://go.microsoft.com/fwlink/p/?LinkId=238295）。
关于CSS3 3D 转换的实际操作，请访问IE Test Drive（http://go.microsoft.com/fwlink/p/?LinkID=196941）站点上的“动手实验：3D 转换”（http://go.microsoft.com/fwlink/p/?LinkId=227893）。

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

关于CSS3 过渡的实际操作演示，请参见IE Test Drive（http://go.microsoft.com/fwlink/p/?LinkID=196941）站点上的“动手实验：过渡”（http://go.microsoft.com/fwlink/p/?LinkId=227781）。以下是一个完整的简单CSS 过渡的示例，关于这个示例的更全面的解释，以及所有过渡属性，请参见“过渡”（http://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 秒之内从完全不透明变为完全透明。请参见这个页面（http://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 过渡的更多功能，请参见“过渡”（http://go.microsoft.com/fwlink/p/?LinkID=238302）。

3. 动画
Internet Explorer 10 和使用 JavaScript 的 Modern UI 风格的应用支持 CSS3 动画。利用CSS3动画，可以创建具有炫酷视觉效果的应用程序，实现平滑流畅的动画效果。只需3个基本步骤即可创建动画：指定动画属性，创建关键帧，将动画应用于一个或多个元素。

动画类似于过渡，都是通过改变元素的位置、大小、颜色和透明度，并通过旋转、位伸、变换等操作来实现动画。像使用过渡效果一样，可以指定计时函数来控制动画的前进速度。但是，利用CSS3 动画，我们还可以使用关键帧，它指定了动画的各个时间点的属性值。这样，我们不仅可以定义动画起始和结束的行为，而且还可以定义在开始和结束之间的行为。动画还具有迭代和反转方向的功能，还可以暂停和恢复播放。

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

<!DOCTYPE html>
<htmllang="en-us">
<head>
<style type="text/css">
body {
padding: 10px;
font-family: "Segoe UI";
}
div { /* 定义动画的 div */
width: 250px;
background-color: lime;
padding: 10px;
font-weight: bold;
font-size: 20pt;
}
div:active { /* 定义动画参数 */
-ms-animation-delay: 0s;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: 2;
12
-ms-animation-name: demo;
}
@-ms-keyframes demo { /* 定义动画的关键帧*/
from {
-ms-animation-timing-function: ease;
}
50% { /* 使用ease 计时函数*/
background-color: purple; /* 来移动和更改div 的颜色*/
-ms-animation-timing-function: ease-in;
-ms-transform: translate(20px,30px);
}
to {
background-color: blue; /* 使用ease 计时函数将div 更改为蓝色*/
}
}
</style>
</head>
<body>
<h1>CSS3 Animations Example</h1>
<p>Click and hold to start the animation. Internet Explorer 10 or later
required.</p>
<div>
Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.
Etiamsedipsum enim, vitae euismododio. Suspendisseeu.
</div>
</body>
</html>

复制代码

这段标记代码的示例定义了两个动画属性：background-color 和-ms-transform。在动画的一个循环周期中，div 元素的背景颜色由柠檬色（初始颜色）变为紫色，然后又变为蓝色。div 元素还向右和向下分别移动20 像素和30 像素，然后还原。这个动画使用了ease 计时函数从开始过渡到中间点（关键帧为50%），然后使用ease-in 计时函数从中间点过渡到结束。动画重复了一次。观看这个动画（http://go.microsoft.com/fwlink/p/?LinkId=228195）（要求Internet Explorer 10）。

正如所期望的，CSS3 动画提供了无限的可能性，我们可以利用它来创建丰富、炫酷的动画。并且也可以帮助我们更好的优化网站，减少不必要的代码，更多内容可以参阅IE10兼容性白皮书，获得更多的帮助，下载地址：http://vdisk.weibo.com/s/bKgeq
关于如何在Internet Explorer 10 和使用JavaScript 的Metro 风格应用中创建CSS 动画的概述，以及CSS3 动画的实际使用示例，请参见“动画”（http://go.microsoft.com/fwlink/p/?LinkId=238298）。
关于CSS3 动画的操作演示，请访问IE Test Drive（http://go.microsoft.com/fwlink/p/?LinkID=196941）站点上的“动手实验：动画（http://go.microsoft.com/fwlink/p/?LinkId=228082）”。
更多兼容Internet Explorer 10 的CSS3 特性的内容请查看Windows Internet Explorer10 Consumer Preview Guide for DevelopersCSS（http://msdn.microsoft.com/en-us/library/ie/hh673536(v=vs.85).aspx）

点评

eugene2candy 第三弹：https://bbs.pcbeta.com/viewthread-1166811-1-1.html 发表于 2012-11-7 13:55 IP属地江苏

1 查看全部评分

eugene2candy

反对 0

youhaveme

Rank: 1

UID: 3116278
帖子: 31
PB币: 153
贡献: 0
技术: 0
活跃: 2

发表于 2012-10-25 13:32:52 IP属地湖北 |显示全部楼层

太复杂了，高步明白。

灰兔纸是Geek

Rank: 5 Rank: 5 Rank: 5

UID: 2998065
帖子: 152
PB币: 817
贡献: 0
技术: 0
活跃: 21

发表于 2012-10-25 13:33:07 IP属地江苏 |显示全部楼层

编辑怎么老是出问题啊！小弟辛辛苦苦编辑了好久，排版老是出问题

dotmspy

Rank: 2 Rank: 2

UID: 3135733
帖子: 73
PB币: 99
贡献: 0
技术: 0
活跃: 38

发表于 2012-10-28 13:07:56 IP属地内蒙古 |显示全部楼层

嗯，支持一个哦

zh12310 zh12310 当前离线积分 873 最后登录 2020-1-16 精华 0 阅读权限 40 主题 3 UID 1979619 帖子 278 PB币 0 威望 127 贡献 0 技术 0 活跃 472 发消息头像被屏蔽唉······ PCBETA Beta2, 积分 873, 距离下一级还需 627 积分 UID 1979619 帖子 278 PB币 0 贡献 0 技术 0 活跃 472 串个门加好友打招呼发消息	发表于 2012-10-31 13:57:54 IP属地江苏 \|显示全部楼层提示: 作者被禁止或删除内容自动屏蔽