CSS旋轉和IE瀏覽器：絕對定位似乎打破IE

我試圖旋轉各種文本塊，以便它們垂直定位，並將它們放置在圖表上非常特定的位置，這些位置將被預覽並打印。 CSS在IE，FF甚至Opera中旋轉文本非常好。CSS旋轉和IE瀏覽器：絕對定位似乎打破IE

但是，當我試圖定位一個旋轉的元素時，IE（完全不擔心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; }

來源

2010-04-13 doub1ejack

有沒有可能提供實時鏈接的機會？ – 2010-04-13 14:55:49

這聽起來像一個問題，我花了很多時間。我在Paul Irish的blog post上留下了兩條評論，詳述了我的發現。下面是我寫的：

IE6和7：必須至少聲明高度或寬度上的去股利將在你的旋轉過濾器旋轉出現在CSS。即使您這樣做，但是，代碼中將出現旋轉濾鏡後應用於該div的任何樣式將不會應用。對於應用於該div的孩子的任何樣式也是如此。奇怪的。

IE8：這似乎不成問題。 I 在代碼中出現旋轉過濾器後，成功將樣式應用於div （包括首次聲明其高度或寬度）。

...更多CSS旋轉怪事報告：

在IE6和7，即使你跟着規則，我貼幾個意見回來，你仍然會完全打破你的網站如果您對每個外部CSS文件使用多個輪替篩選器。你必須有單獨的CSS文件每旋轉過濾器，或者簡單地添加每個過濾器嵌套在其自己獨特的風格標籤在您的HTML頭。不這樣做將只顯示第一個旋轉的對象，但即使這個將模糊，並在不正確的角度。

歡快，消除導致所有旋轉渲染完美的DOCTYPE，所以我假設怪癖模式知道如何處理多回轉過濾器？另外，對於更大，更復雜的樣式表，甚至有更大的副作用，但我不能確定是什麼導致了這些副作用。反正...

帶回家的消息：

僅使用1專有MS過濾器：（用於旋轉，至少當）每外部樣式表。並且..html中的每個旋轉過濾器必須在其自己的一組樣式標記中爲。

即使我的問題稍有不同，您可能會遇到類似的情況，其中兩個內部div由父級旋轉。這值得一試。至少嘗試將.rotate delclaration移動到樣式表的底部。

來源

2010-11-04 04:18:18 Masondesu

我發現，這個工作，如果你把旋轉的txtblocks而不是外部容器上。

Demo

來源

2010-04-13 15:18:10 graphicdivine

我也試過。項目旋轉，但它們在IE和FF之間不一致地顯示。我正在旋轉容器以嘗試獲得統一的定位。我剛剛看到IE7似乎旋轉了絕對定位的元素，而且它是IE8遇到了麻煩。 – doub1ejack 2010-04-13 15:51:40

試試這個代碼：

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

你申請的代碼錯誤的元素。此外，作爲參考其他人在理解這

來源

2010-04-13 15:22:21 easwee

謝謝，但它不應該級聯下來？孩子的位置應該是相對於他們的父母 - 也就是說，他們應該接受相同的輪換。如果我不能旋轉父母，我不得不爲每個孩子設置輪換......這是一個令人厭煩的列表。 – doub1ejack 2010-04-13 15:57:03

據我所知過濾器：使用JavaScript作爲基礎來做所有計算，所以它不是真正的CSS - 因此級聯不適用。另外IE一直有處理事情的方式。 P.s .:標記爲已解決，如果這個答案對你有幫助。 – easwee 2010-04-14 10:40:44

它不工作的IE7！ – 2011-07-19 10:02:33

CSS旋轉和IE瀏覽器：絕對定位似乎打破IE

回答

相關問題