Question

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

但是当我尝试定位旋转元素时，IE 7＆amp; 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和7：你必须至少申报   div的高度或宽度   将在您之前轮换   旋转过滤器出现在CSS中。   但是，即使你这样做了   样式应用于该div之后   旋转过滤器出现在代码中   不会被应用。同样似乎   对于适用于此的任何样式都适用   div的孩子也是。怪异。

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

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

在IE6和7中，即使你遵循了   规则我发了几条评论，   你仍然会完全破坏你的网站   如果你使用多个轮换   每个外部CSS文件过滤。您   要么必须有单独的CSS文件   每个旋转过滤器，或简单地添加   每个过滤器都嵌套在它自己的唯一中   你的HTML头部的样式标签。   不这样做只会显示   第一个旋转对象，但即便如此   会模糊不清   角。

搞笑，删除DOCTYPE   导致所有旋转渲染   完美，所以我假设怪癖模式   知道如何处理多个旋转   过滤器？此外，更大，更多   复杂的样式表，甚至有   怪异的副作用，但我不能   找出导致这些的原因。   反正...

带回家留言：

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

即使我的问题略有不同，你可能会遇到类似的情况，两个内部div被父级轮换。这值得一试。至少尝试将.rotate delclaration移动到样式表的底部。

Answer 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

时也可以参考其他人

Answer 3

我发现如果你把旋转放在txtblocks而不是外部容器上，这是有效的。

Demo

CSS旋转＆amp; IE：绝对定位似乎打破了IE

3 个答案: