在 Internet Explorer 9 中打印带有旋转文本的网页 [英] Printing webpage with rotated text in Internet Explorer 9
问题描述
好的，所以我完全改变了这个问题，让废话少说.试试这个链接:打印旋转文本跨浏览器(它包含给定的源代码下面)
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)
您将看到带有蓝色边框的红色 blablabla 文本，逆时针旋转 90 度.
You will see red blablabla text with a blue border rotated 90 degrees ccw.
现在任何 IE9 用户都有我的问题，请访问我的网站或使用下面的代码.正如您在打印预览中看到的:上下文菜单->打印预览..."，旋转失败！(当然背景颜色会丢失，但这是正常的)
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)
而且我知道可以打印，例如 35 度旋转文本，我有一个例子，但它包含很多垃圾 css 代码，所以我还没有真正弄清楚有什么不同在那个例子中.
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>
推荐答案
好的，所以我找到了答案，'duri' 用他的 -ms-transform 有点正确.但是我没有看到将 -ms-transform 用于跨浏览器 css 来旋转文本的意义.原因是这样的:
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:
在 IE9 中，您似乎可以使用 -ms-transform 或 filter: progid:DXImageTransform.Microsoft.Matrix() 来旋转文本.但是当您要打印网页时，如 context menu ->打印预览...，css filter-attribute 不再适用，使用-ms-transform.
in IE9 it seems that you can just rotate text with either -ms-transform or filter: progid:DXImageTransform.Microsoft.Matrix(). BUT when you are about to print the webpage, as in context menu -> Print preview..., the css filter-attribute does not apply anymore and -ms-transform is used.
所以要拥有一个真正的 css 跨浏览器解决方案，它还可以打印旋转的内容，您也必须使用(如我的示例中所示):
So to have a real css crossbrowser solution, that also prints rotated stuff, you MUST use as well (as in my example):
-ms-transform: rotate(270deg) translate(-200px,0px);;
-ms-transform-origin: 0% 0%;
谨防！我现在尝试应用-ms-transform，但又出现了一个新问题......因为现在我使用以下脚本:
BEWARE! I now tried to apply -ms-transform, but again a new problem occurs... Because now I use the following script:
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 来旋转.
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.
所以我现在能想到的唯一可能的解决方案是对过滤器进行破解，这样在 IE9 中它就不会做过滤器的事情了.有没有办法在所有 IE 浏览器中旋转元素而不必须使用css hacks?告诉我，我还没有找到...
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...
例如，查看 css3please.com，它声称有用于旋转的跨浏览器代码.好吧，它没有，将值更改为 270 度并调整变换矩阵.你会在 IE9 中看到，文本会倒置(180 度)，而不是 270 度旋转.
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.
这篇关于在 Internet Explorer 9 中打印带有旋转文本的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
