Css3过渡+转换属性在早期版本的IE中不工作
Css3 Transition+Transform property not working in Earlier version of IE?
HTML代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/demo.css" />
</head>
<body>
<div></div>
</body>
</html>
CSS CODE:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
-ms-transition: width 2s, height 2s, -webkit-transform 2s; /*IE */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
-sand-transform: rotate(180deg); /*IE9 */``
transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
我不明白为什么css3转换和转换在IE9和更早的版本中不起作用。我也试过-ms-
, -sand-
, prefix
,但仍然不起作用。
在IE9及以下版本中不支持CSS转场
http://caniuse.com/壮举= css转换
同样,IE10使用无前缀转换。(所以-ms-transition在这里没有用)
使用Modernizr来检测是否支持css转场,否则退回到所有不支持css转场的浏览器(包括IE9)。
if(!Modernizr.csstransitions) { // CSS ANimations Not supported.
//ADD YOUR CODE HERE
}
相关文章:
- 如何确定相对较新版本的IE的高度和宽度(IE8不喜欢从JavaScript设置这种样式吗?
- javascript网格未在IE 8及以上版本中显示
- 是否可以使用Javascript检测所有版本的IE?怎样
- 针对IE 8及以下版本
- 图像加载不适用于 IE 8 或更低版本
- IE版本检查停止工作
- 如果用户的浏览器早于以下版本,则显示一条消息:IE 10、Firefox 39、Chrome 39、Opera 8
- 使用less.js检测旧版本的ie,然后使用filter
- jsPDF在任何IE版本中显示iframe
- fadeIn动画无法在IE中工作(所有版本)
- 获取IE版本+将类添加到正文
- 在Facebook图形中,使用Javascript的IE(所有版本)不支持API调用跨浏览器调用
- 什么版本的IE支持安全性=“;受限制的“;iframes
- 使用JQuery和IE在悬停时高亮显示表行-所有版本
- 如何在旧 IE 版本中将捕获组与 String.split 一起使用
- 对 IE 8 及更低版本的 NVD3 支持
- 什么是 IE 版本的网络驱动程序.Capabilities.firefox().
- 旧版本IE上的Jquery问题
- 某些版本IE中的JavaScript重定向问题
- 旧版本IE中JSON对象的问题