2010-04-13 43 views
6

我試圖旋轉各種文本塊,以便它們垂直定位,並將它們放置在圖表上非常特定的位置,這些位置將被預覽並打印。 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; } 
+0

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

回答

5

這聽起來像一個問題,我花了很多時間。我在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移動到樣式表的底部。

0

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

Demo

+0

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

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> 

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

+0

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

+1

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

+0

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