CSS Rotation & IE：绝对定位似乎打破了 IE答案

【问题标题】：CSS Rotation & IE: absolute positioning seems to break IECSS Rotation & IE：绝对定位似乎打破了 IE
【发布时间】：2010-11-04 12:18:18
【问题描述】：

我正在尝试旋转各种文本块，使它们垂直定向，并将它们放置在图表上非常特定的位置，以便预览然后打印。 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;  }

【问题讨论】：

你能提供一个实时链接吗？

标签： css internet-explorer rotation css-position

【解决方案1】：

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

IE6 和 7：您必须至少声明 div 的高度或宽度将在您之前轮换旋转过滤器出现在 CSS 中。然而，即使你这样做，任何应用于该 div 之后的样式旋转过滤器出现在代码中不会被应用。好像也一样对于应用于该的任何样式都是如此 div 的孩子也是如此。很奇怪。

IE8：这似乎不是问题。我成功将样式应用到 div （包括声明其高度或第一次宽度）后旋转过滤器出现在代码中。

...还有更多 CSS 旋转怪异需要报告：

在 IE6 和 7 中，即使您遵循规则我回贴了几个cmets，你仍然会完全破坏你的网站如果您使用不止一个旋转按外部 CSS 文件过滤。你要么必须有单独的 CSS 文件每个旋转过滤器，或简单地添加每个过滤器都嵌套在自己独特的 html 头部的样式标签。否则只会显示第一个旋转的物体，但即使是这个会很模糊而且不正确角度。

有趣的是，删除 DOCTYPE 导致所有旋转呈现完美，所以我假设怪癖模式知道如何处理多次旋转过滤器？此外，随着更大、更复杂的样式表，甚至有更奇怪的副作用，但我不能查明是什么原因造成的。总之……

带回家的消息：

仅使用 1 个专有的 ms 过滤器：（当用于旋转时，至少）每外部样式表。和..每个您的 html 中的旋转过滤器必须是在它自己的一组样式标签中。

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

【讨论】：

【解决方案2】：

试试这个代码：

<!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>

您将代码应用于错误的元素。也可以作为参考其他人理解这个http://snook.ca/archives/html_and_css/css-text-rotation

【讨论】：

谢谢，但它不应该是级联的吗？孩子的位置应该相对于他们的父母——也就是说，他们应该接受相同的旋转。如果我不能只轮换父母，我必须为每个孩子设置轮换......这是一个令人厌烦的列表。
据我所知过滤器：使用 javascript 作为基础来进行所有计算，所以它不是真正的 css - 因此级联不适用。 IE也一直有他处理事情的方式。 P.s.：如果此答案对您有帮助，请标记为已解决。

【解决方案3】：

我发现如果您将旋转放在 txtblocks 上，而不是放在外部容器上，这会起作用。

Demo

【讨论】：

我也试过这个。项目旋转，但在 IE 和 FF 之间显示不一致。我正在旋转容器以尝试获得统一的定位。我刚刚看到 IE7 似乎在旋转绝对定位的元素，而且是 IE8 遇到了问题。