6

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

3 回答 3

5

这听起来像是我花了很多时间处理的问题。我在 Paul Irish 的博客文章上留下了两条评论，详细说明了我的发现。这是我写的：

IE6 和 7：在旋转过滤器出现在 CSS 中之前，您必须在要旋转的 div 上至少声明高度或宽度。但是，即使您这样做，在代码中出现旋转过滤器之后应用于该 div 的任何样式都不会被应用。对于应用于该 div 的子项的任何样式似乎也是如此。奇怪的。

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

...以及更多的 CSS 旋转怪异报告：

在 IE6 和 7 中，即使您遵循我发布的一些评论的规则，如果您对每个外部 CSS 文件使用多个旋转过滤器，您仍然会完全破坏您的网站。您要么必须为每个旋转过滤器拥有单独的 CSS 文件，要么只需将每个过滤器嵌套在 html 头部的自己独特的样式标签中。不这样做只会显示第一个旋转的对象，但即使这样也会变得模糊并且角度不正确。

有趣的是，删除 DOCTYPE 会导致所有旋转完美呈现，所以我假设 quirks 模式知道如何处理多个旋转过滤器？此外，对于更大、更复杂的样式表，甚至会出现更奇怪的副作用，但我无法确定是什么原因造成的。总之……</p>

带回家留言：

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

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

于 2010-11-04T04:18:18.330 回答
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的参考

于 2010-04-13T15:22:21.510 回答
0

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

演示

于 2010-04-13T15:18:10.790 回答