CSS 旋转和 IE : absolute positioning seems to break IE

Question

我正在尝试旋转各种文本 block ，使它们垂直放置，并将它们放置在图表上非常特定的位置，这些位置将被预览然后打印。 CSS 可以在 IE、FF 甚至 Opera 中很好地旋转文本。

但是当我尝试定位一个旋转的元素时，IE 7 和 8(不担心 6)完全中断并且元素停留在其原始位置。有办法解决这个问题吗？我真的需要对这些标签所在的位置进行像素控制。

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

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;  }

Answer 1

这听起来像是我花了很多时间解决的问题。我在 Paul Irish 的 blog post 上留下了两条评论详细说明我的发现。这是我写的:

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.

...以及更多 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.

尽管我的问题略有不同，但您可能会遇到类似的情况，两个内部 div 被父级旋转。值得一试。至少尝试将 .rotate 声明移动到样式表的底部。