Question

好的，所以我完全改变了这个问题，让我们剪掉废话。试试这个链接： Printing rotated text crossbrowser（它包含下面给出的源代码）

你会看到红色的blablabla文字，蓝色边框旋转90度ccw。

现在我的问题是任何IE9用户，请访问我的网站或使用下面的代码。正如您在打印预览中看到的：上下文菜单 - ＆gt; “打印预览......”，旋转失败！（当然背景颜色会丢失，但这是正常的）

而且我知道可以打印，例如35度，旋转文本，我有一个例子，但它包含很多垃圾css代码，所以我真的无法弄清楚有什么不同在那个例子中。

任何人都可以看到我在这里遗漏的明显事物吗？

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.testRotation
{
  width: 200px;
  height: 16px;
  background-color: red;
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
  -moz-transform:rotate(270deg) translate(-200px,0px);
  -moz-transform-origin: 0% 0%;
  -webkit-transform: rotate(270deg) translate(-200px,0px);
  -webkit-transform-origin: 0% 0%;
  -o-transform: rotate(270deg) translate(-200px,0px);
  -o-transform-origin: 0% 0%;
  transform: rotate(270deg) translate(-200px,0px);
  transform-origin: 0% 0%;
  zoom: 1;
  position: absolute;
  left: 20px;
  top: 100px;
  margin: 10px;
}
</style>
</head>

<body>
<div style="position: absolute; width: 16px; height: 200px;left: 25px; top: 105px; background-color: green; border-style: solid; border-width: 5px; border-color: blue;word-wrap: break-word;">
TARGET
</div>
<div class="testRotation">
BLABLABLABLABLA
</div>

</body>
</html>

Answer 1

好的，所以我找到了答案，并且'duri'对他的-ms-transform有点正确。但我没有看到使用-ms-transform为crossbrowser css旋转文本的重点。原因很简单：

在IE9中，您似乎可以使用-ms-transform或filter: progid:DXImageTransform.Microsoft.Matrix()旋转文字。但是当您要打印网页时，如context menu -> Print preview...中所示，css过滤器属性不再适用，并且使用了-ms-transform。

所以要有一个真正的css crossbrowser解决方案，也可以打印旋转的东西，你也必须使用（如我的例子所示）：

-ms-transform: rotate(270deg) translate(-200px,0px);;
-ms-transform-origin: 0% 0%;

编辑：谨防！我现在尝试应用-ms-transform，但又出现了一个新问题...... 因为现在我使用以下脚本：

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
-moz-transform:rotate(270deg) translate(-200px,31px);-moz-transform-origin: 0% 0%;
-webkit-transform: rotate(270deg) translate(-200px,31px);-webkit-transform-origin: 0% 0%;
-o-transform: rotate(270deg) translate(-200px,0px);-o-transform-origin: 0% 0%;
-ms-transform: rotate(270deg) translate(-200px,0px);-ms-transform-origin: 0% 0%;
transform: rotate(270deg) translate -200px,0px);transform-origin: 0% 0%;
zoom: 1;

这应该在所有浏览器中旋转元素.. 除了IE9。因为它会识别-ms-filter以进行旋转，并且它将使用过滤器进行旋转。

所以我现在能想到的唯一可能的解决方案是对过滤器进行破解，这样在IE9中它就不会做过滤器了。有没有办法在所有IE浏览器中旋转一个元素而没有不得不使用CSS黑客？让我知道，我还没有找到任何......

例如，查看css3please.com，它声称有用于旋转的crossbrowser代码。嗯，它没有，将值更改为270度并调整转换矩阵。你将在IE9中看到，文本将颠倒（180度），而不是旋转270度。

在Internet Explorer 9中使用旋转文本打印网页

1 个答案: