在Internet Explorer 9中打印带有旋转文本的网页 [英] Printing webpage with rotated text in Internet Explorer 9
问题描述
打印旋转文本crossbrowser （它包含下面给出的完整源代码。）
您将看到红色blablabla文本，蓝色边框旋转90度ccw。
现在我的问题对于任何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
{
宽度：200px;
身高：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;
仓位：绝对;剩余
：20px;
top：100px;
保证金：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;自动换行：break-word;>
TARGET
< / div>
< div class =testRotation>
BLABLABLABLABLA
< / div>
< / body>
< / html>
好的，所以我找到了答案，'duri '他的-ms-transform有点正确。但我没有看到使用-ms-transform为crossbrowser css旋转文本的重点。原因是这样的：
在IE9中你似乎可以用 -ms-transform 或 filter：progid：DXImageTransform.Microsoft.Matrix（）。但是当您打算打印网页时，如上下文菜单 - >打印预览... ，css filter-attribute不再适用，并且使用了-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 hacks？让我知道，我还没有找到任何...
例如，查看css3please.com，它声称有用于旋转的crossbrowser代码。嗯，它没有，将值更改为270度并调整转换矩阵。你会在IE9中看到，文字将颠倒（180度），而不是旋转270度。
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>
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-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.
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%;
EDIT: 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;
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.
这篇关于在Internet Explorer 9中打印带有旋转文本的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
