CSS 旋转和 IE：绝对定位似乎打破了 IE
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2630504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Rotation & IE: absolute positioning seems to break IE
提问by doub1eHyman
I'm trying to rotate a variety of text blocks so they are vertically oriented, and position them in very specific locations on a diagram which will be previewed and then printed. CSS rotates the text very nicely in IE, FF, even Opera.
我正在尝试旋转各种文本块，使它们垂直定向，并将它们放置在图表上非常特定的位置，该图表将被预览然后打印。CSS 在 IE、FF 甚至 Opera 中非常好地旋转文本。
But when I try to position a rotated element, IE 7 & 8 (not worried about 6) breaks completely and the element stays in its original location. Any way around this? I really need to-the-pixel control of where these labels are located.
但是当我尝试定位一个旋转的元素时，IE 7 & 8（不担心 6）完全中断并且元素保持在其原始位置。有什么办法解决这个问题吗？我真的需要对这些标签所在的位置进行像素控制。
HTML
HTML
<div class="content rotate">
<div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div>
<div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div>
</div>
CSS
CSS
div.content {
position: relative;
width: 300px;
height: 300px;
margin: 30px;
border-top: black 4px solid;
border-right: blue 4px solid;
border-bottom: black 4px dashed;
border-left: blue 4px dashed; }
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.txtblock {
width: auto;
position: absolute;
}
#Div1 {
left:44px;
top:70px;
border:red 3px solid; }
#Div2 {
left:13px;
top:170px;
border:purple 3px solid; }
采纳答案by Mason Stewart
This sounds like an issue I spent a good deal of time with. I left two comments on Paul Irish's blog postdetailing my findings. Here is what I wrote:
这听起来像是我花了很多时间解决的问题。我在 Paul Irish 的博客文章中留下了两条评论，详细说明了我的发现。这是我写的：
IE6 and 7: You must declare at least height or width on the div that's going to be be rotated BEFORE your rotation filters appear in the CSS. Even if you do this, however, any styles applied to that div AFTER the rotation filters appear in the code will not be applied. The same seems to be true for any styles applied to that div's children as well. Weird.
IE8: This seems to not be a problem. I successfully applied styles to the div (including declaring its height or width for the first time) after the rotation filters appear in the code.
IE6 和 7：在 CSS 中出现旋转过滤器之前，您必须至少声明要旋转的 div 的高度或宽度。但是，即使您这样做，在代码中出现旋转过滤器之后应用于该 div 的任何样式也不会应用。对于应用于该 div 的孩子的任何样式似乎也是如此。奇怪的。
IE8：这似乎不是问题。在代码中出现旋转过滤器后，我成功地将样式应用于 div（包括首次声明其高度或宽度）。
...and more CSS rotation weirdness to report:
...以及更多 CSS 旋转奇怪的报告：
In IE6 and 7, even if you follow the rules I posted a few comments back, you will still totally break your site if you use more than one rotation filter per external CSS file. You either have to have separate CSS files per rotation filter, or simply add each filter nested in its own unique style tags in the head of your html. Failure to do so will only display the first rotated object, but even this will be blurry and at the incorrect angle.
Hilariously, removing the DOCTYPE causes all the rotation to render perfectly, so I'm assuming quirks mode knows how to handle multiple rotation filters? Also, with a larger, more complex stylesheet, there were even weirder side effects, but I couldn't pinpoint what was causing those. Anyways…
Take home message:
Use only 1 proprietary ms filter: (when used for rotation, at least) per external stylesheet. and.. Each rotation filter in your html must be in its own set of style tags.
在 IE6 和 7 中，即使您遵循我发布的一些评论的规则，如果您为每个外部 CSS 文件使用多个旋转过滤器，您仍然会完全破坏您的网站。您要么必须为每个旋转过滤器设置单独的 CSS 文件，要么只需在 html 的头部添加嵌套在其自己独特的样式标签中的每个过滤器。不这样做只会显示第一个旋转的对象，但即使这样也会模糊且角度不正确。
有趣的是，删除 DOCTYPE 会导致所有旋转完美呈现，所以我假设 quirks 模式知道如何处理多个旋转过滤器？此外，使用更大、更复杂的样式表，甚至会产生更奇怪的副作用，但我无法确定是什么导致了这些副作用。无论如何…
带回家留言：
仅使用 1 个专有 ms 过滤器：（至少用于旋转时）每个外部样式表。和.. html 中的每个旋转过滤器都必须在它自己的一组样式标签中。
Even though my issue was slightly different, you may be running into a similar situation with the two inner divs being rotated by the parent. It's worth a shot. At least try moving the .rotate delclaration to the bottom of the stylesheet.
尽管我的问题略有不同，但您可能会遇到类似的情况，两个内部 div 由父级旋转。值得一试。至少尝试将 .rotate 声明移动到样式表的底部。
回答by easwee
Try this code:
试试这个代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centrsource najbolj?e Ponudbe</title>
<style type="text/css">
#content {
position: relative;
width: 300px;
height: 300px;
margin: 30px;
border-top: black 4px solid;
border-right: blue 4px solid;
border-bottom: black 4px dashed;
border-left: blue 4px dashed;
}
.txtblock {
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
</head>
<body>
<div id="content">
<div class="txtblock">Ardvark Avacado<br />Awkward</div>
</div>
</body>
</html>
You're applying the code to the wrong element. Also as reference to others in understanding this http://snook.ca/archives/html_and_css/css-text-rotation
您将代码应用于错误的元素。也作为其他人在理解这个http://snook.ca/archives/html_and_css/css-text-rotation 时的参考
