在 Internet Explorer 9 中打印带有旋转文本的网页
好吧，所以我彻底改变了这个问题，让我们少说废话。试试这个链接： 打印旋转文本跨浏览器 （它包含给定的源代码如下）
您将看到带有蓝色边框的红色 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>
OK, so I completely changed this question, lets cut the crap. Try this link:
Printing rotated text crossbrowser (It contains exactly the source code as given below)
You will see red blablabla text with a blue border rotated 90 degrees ccw.
Now my problem for any IE9 user, go to my website or use this code below. As you can see in the print preview: context menu -> "Print preview...", the rotation fails! (And ofcourse the background colors get lost, but this is normal)
And I KNOW it is possible to print, for example 35 degrees, rotated text, I got an example of it, but it contains a lot of crap css code, so I have not really been able to figure out what is different in that example.
Can anyone see what obvious thing I am missing here?
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好的，所以我找到了答案，“duri”的 -ms-transform 有点正确。但我没有看到使用 -ms-transform 跨浏览器 css 来旋转文本的意义。原因就在于：
在 IE9 中，您似乎可以使用
-ms-transform或filter: progid:DXImageTransform.Microsoft.Matrix()来旋转文本。但是当您要打印网页时，如上下文菜单 -> 中所示打印预览...，css 过滤器属性不再适用，并使用 -ms-transform。因此，要拥有一个真正的 css 跨浏览器解决方案，还可以打印旋转的内容，您也必须使用（如我的示例中所示）：
编辑：
提防！我现在尝试应用 -ms-transform，但又出现了新问题......
因为现在我使用以下脚本：
这应该在所有浏览器中旋转元素。
除了IE9。因为它既会识别-ms-filter进行旋转，又会使用filter进行旋转。
所以我现在能想到的唯一可能的解决方案是对过滤器进行黑客攻击，这样在 IE9 中它就不会做过滤器的事情了。有没有什么方法可以在所有 IE 浏览器中旋转元素而无需使用CSS 黑客？让我知道，我还没有找到任何...
例如，查看 css3please.com，它声称有用于旋转的跨浏览器代码。嗯，事实并非如此，将值更改为 270 度并调整变换矩阵。您将在 IE9 中看到，文本将上下颠倒（180 度），而不是旋转 270 度。
OK, so I found the answer, and 'duri' was a bit right with his -ms-transform. But I did not see the point of using -ms-transform for a crossbrowser css to rotate text. And the very reason is this:
in IE9 it seems that you can just rotate text with either
-ms-transformorfilter: progid:DXImageTransform.Microsoft.Matrix(). BUT when you are about to print the webpage, as incontext menu -> Print preview..., the css filter-attribute does not apply anymore and -ms-transform is used.So to have a real css crossbrowser solution, that also prints rotated stuff, you MUST use as well (as in my example):
EDIT:
BEWARE! I now tried to apply -ms-transform, but again a new problem occurs...
Because now I use the following script:
This should rotate the element in all browsers..
Except for IE9. Because it will both recognize -ms-filter to rotate, and it will use filter to rotate.
So the only possible solution I can think of now is to put a hack on the filter, so that in IE9 it will not do the filter thing.. Is there any way at all to rotate an element in all IE browsers without having to use css hacks? Let me know, I haven't found any...
For example, check out css3please.com, it claims to have crossbrowser code for rotate. Well, it does not, change the values to 270 degrees and adapt the transformation matrix. And you will see in IE9, the text will be upside down (180 degrees), instead of 270 degrees rotated.