CSS转换属性 - IE9上的结果不一致& IE10

时间:2015-06-23 01:35:35

标签: css internet-explorer-9 transform internet-explorer-10

标题:CSS转换属性 - IE9上的结果不一致& IE10

以下bog标准w3schools演示代码在IE9和IE上观看时表现不一致IE10。问题是无法识别转换属性。

使用本地存储在计算机上的文件(即.Desktop)打开时工作 在存储在共享驱动器上打开时失败,例如Web服务器但直接访问(不是通过http)
通过http引用打开共享上的同一文件时工作。

尝试识别差异化因素。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}
</style>
</head>
<body>

<div>Hello</div>
<br>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>
<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p>
<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

最新的w3schools代码是

div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
      transform: rotate(7deg);
   }

http://www.w3schools.com/cssref/css3_pr_transform.asp

答案 1 :(得分:0)

看起来问题是浏览器在某些情况下切换到Quirks模式,修复是将其添加到头顶...

<meta http-equiv="x-ua-compatible" content="IE=Edge"/>

我认为这仍然是强制最新标准模式的有效代码。