CSS 旋转& IE：绝对定位似乎打破了 IE

发布于 2024-08-28 12:30:44 字数 1129 浏览 6 评论 0原文

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

但是当我尝试定位旋转元素时，IE 7 & 8（不担心 6）完全断裂并且元素保留在其原始位置。有什么办法解决这个问题吗？我确实需要对这些标签的位置进行像素控制。

HTMLCSS

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

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

原文

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.

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.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

好听的两个字的网名 2024-09-04 12:30:44

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

IE6 和 7：您必须至少声明
div 的高度或宽度
将在您之前轮换
旋转过滤器出现在 CSS 中。
然而，即使您这样做，任何
应用于该 div 之后的样式
旋转过滤器出现在代码中
将不会被应用。似乎也一样
对于应用于该对象的任何样式都是正确的
div 的孩子也是如此。奇怪。
IE8：这似乎不是问题。我
成功将样式应用到 div
（包括声明其高度或
第一次宽度）之后
旋转过滤器出现在代码中。

...以及更多 CSS 旋转怪异现象需要报告：

在 IE6 和 7 中，即使您遵循
规则我发了一些评论回来，
你仍然会完全破坏你的网站
如果您使用多次旋转
每个外部 CSS 文件的过滤器。你
要么必须有单独的 CSS 文件
每旋转过滤器，或者简单地添加
每个过滤器都嵌套在自己独特的
html 头部的样式标签。
如果不这样做，只会显示
第一个旋转的物体，但即使是这个
将会变得模糊且不正确
角度。
有趣的是，删除了 DOCTYPE
导致所有旋转渲染
完美，所以我假设怪癖模式
知道如何处理多次旋转
过滤器？此外，还具有更大、更多
复杂的样式表，甚至有
更奇怪的副作用，但我做不到
查明是什么原因造成的。
无论如何……
带回家的信息：
仅使用 1 个专有的毫秒过滤器：
（至少当用于旋转时）每
外部样式表。和..每个
html 中的旋转过滤器必须是
在它自己的一组样式标签中。

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

回复收藏 0 原文

他不在意 2024-09-04 12:30:44

尝试此代码：

<!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 文本旋转

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

回复收藏 0 原文