2

所以我将这个野兽用于 IE8 旋转：

.no-csstransforms {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.34202014, M12=0.93969262, M21=-0.93969262, M22=0.34202014,sizingMethod='auto expand')";
}

在当地工作就像一个魅力。但是，一旦我将其上传到服务器，它就会中断。那里只是一条平线。在“IE 8 模式”下在 IE9 和 IE10 上测试。

到目前为止，本地和远程之间的唯一区别是这种轮换。根据 IE 开发工具，应用了 CSS。

我的问题是：为什么 IE8 对本地和远程文件显示不同的 CSS 行为，我如何才能在两者中获得持久的结果？

更新：我可能让你们中的一些人对 X-UA 元标记感到困惑。我包含它只是因为我在 stackoverflow 上读到不包含它会导致 IE8 中的离线和在线不一致。

我真的没有得到IE8。

这个例子

<!DOCTYPE html>
<head>
    <style type="text/css"> 
    .me {
        border-bottom: 1px solid red;
        height: 300px;
        width: 300px;
    }
    .csstransforms .me {        
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        transform: rotate(-70deg);
    }

    .no-csstransforms .me {
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.34202014, M12=0.93969262, M21=-0.93969262, M22=0.34202014,sizingMethod='auto expand')";
    }
    </style>
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
</head>



<body>
    <div class="me"></div>
</body>
</html>

在本地对我不起作用。在我的实际用例中，它在本地工作，但没有上传到服务器。小提琴在这里 http://jsfiddle.net/SPMxZ/1/

4

1 回答 1

0

使用时

<meta http-equiv="...

您要求浏览器向请求标头添加一些内容（msdn http-equiv）

也许我在您的问题中弄错了“本地”-但是如果您不使用本地服务器-您所做的只是在浏览器中打开一个没有请求的文件-因此响应标头中没有添加任何内容-因此您的

<meta http-equiv="...

不评估。IE 版本保持“IE8 模式”。（“本地”）

从服务器传递的响应标头现在将您的兼容性覆盖带到“边缘”，因此您设置为 IE8 模式的 IE10正在获得“边缘”，在您的情况下是 IE10。

因此，正如@Spudley 所说，要在 IE8 上进行测试 - 不要使用 IE10，因为使用您的 http-equiv 兼容性规则，您可以切换刚刚手动设置的渲染模式。

为了更容易发现这个问题：

  • 使用本地服务器堆栈（例如XAMPP）
  • 在虚拟机中使用本机浏览器（例如现代 IE）

如果这没有帮助，如果你能提供一个jsfiddle会很酷，因为超出提到的任何东西，无论是缺少样式元素上的布局都可能破坏你的 css

于 2013-09-10T14:31:04.733 回答