在 Internet Explorer 9 中打印带有旋转文本的网页答案

【问题标题】：Printing webpage with rotated text in Internet Explorer 9在 Internet Explorer 9 中打印带有旋转文本的网页
【发布时间】：2011-12-13 17:10:47
【问题描述】：

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

您将看到带有蓝色边框的红色 blablabla 文本，逆时针旋转 90 度。

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

而且我知道可以打印，例如 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>

【问题讨论】：

对于 IE9，您可以使用 -ms-transform。
我想你错过了我的问题；它是关于实际打印网页。旋转文本不是问题。打印网页时，它不旋转。打印预览和我在弹窗中看到的不一样，可能是我不够清楚？

标签： internet-explorer text printing rotation webpage

【解决方案1】：

好的，所以我找到了答案，'duri' 对他的 -ms-transform 有点正确。但是我没有看到将 -ms-transform 用于跨浏览器 css 来旋转文本的意义。原因是这样的：

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

所以要拥有一个真正的 css 跨浏览器解决方案，它还可以打印旋转的东西，你也必须使用（就像我的例子一样）：

-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 来旋转，也会使用 filter 来旋转。

所以我现在能想到的唯一可能的解决方案是对过滤器进行破解，这样在 IE9 中它就不会做过滤器的事情了。有没有办法在所有 IE 浏览器中旋转元素而无需必须使用css hacks？告诉我，我还没有找到...

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

【讨论】：