CSS Rotation&IE:绝对定位似乎打破了IE

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

但是当我尝试定位旋转元素时,IE 7和8(不担心6)完全断开,元素保持在原始位置.有什么方法吗？我真的需要像素控制这些标签的位置.

HTML

  

    
Ardvark Avacado
Awkward
    
Brownies
Bacteria Brussel Sprouts
  

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

Mason Stewar.. 5

这听起来像是我花了很多时间的问题.我在Paul Irish的博客文章中留下了两条评论,详细说明了我的发现.这是我写的:

IE6和7:在旋转过滤器出现在CSS中之前,必须至少在要旋转的div上声明高度或宽度.但是,即使您执行此操作,也不会应用在旋转过滤器出现在代码中之后应用于该div的任何样式.同样适用于该div的孩子的任何样式也是如此.奇怪的.

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

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

在IE6和7中,即使您遵循我发布的一些注释的规则,如果您对每个外部CSS文件使用多个旋转过滤器,您仍将完全破坏您的网站.您要么每个旋转过滤器必须有单独的CSS文件,要么只是将每个过滤器嵌套在html头部的独特样式标记中.如果不这样做,将仅显示第一个旋转的对象,但即使这样也会模糊且角度不正确.

非常有趣的是,删除DOCTYPE会导致所有旋转完美呈现,所以我假设怪癖模式知道如何处理多个旋转过滤器？此外,对于更大,更复杂的样式表,甚至更奇怪的副作用,但我无法确定导致这些的副作用.无论如何…

带回家留言:

每个外部样式表仅使用1个专有的ms过滤器:(当用于旋转时).和..你的html中的每个旋转过滤器必须在它自己的样式标签集中.

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

这听起来像是我花了很多时间的问题.我在Paul Irish的博客文章中留下了两条评论,详细说明了我的发现.这是我写的:

IE6和7:在旋转过滤器出现在CSS中之前,必须至少在要旋转的div上声明高度或宽度.但是,即使您执行此操作,也不会应用在旋转过滤器出现在代码中之后应用于该div的任何样式.同样适用于该div的孩子的任何样式也是如此.奇怪的.

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

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

在IE6和7中,即使您遵循我发布的一些注释的规则,如果您对每个外部CSS文件使用多个旋转过滤器,您仍将完全破坏您的网站.您要么每个旋转过滤器必须有单独的CSS文件,要么只是将每个过滤器嵌套在html头部的独特样式标记中.如果不这样做,将仅显示第一个旋转的对象,但即使这样也会模糊且角度不正确.

非常有趣的是,删除DOCTYPE会导致所有旋转完美呈现,所以我假设怪癖模式知道如何处理多个旋转过滤器？此外,对于更大,更复杂的样式表,甚至更奇怪的副作用,但我无法确定导致这些的副作用.无论如何…

带回家留言:

每个外部样式表仅使用1个专有的ms过滤器:(当用于旋转时).和..你的html中的每个旋转过滤器必须在它自己的样式标签集中.

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