2012-08-02 51 views
0

我有幾個側面標籤,可以在Chrome和Firefox中完美工作,但在IE中會出現問題。真的很感謝有人幫助我。繼承人到他們一個環節的工作http://www.sgsgrass.co.uk/quotation.php文字在Internet Explorer中旋轉,但div仍然保持直立。

color: #FFF; 
height: 40px; 
width: 200px; 
font-size: 24px; 
line-height: 40px; 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
text-align: center; 
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
writing-mode: tb-rl; 
position: fixed; 
top: 30%; 
left: 0px; 
-moz-transform-origin: 20px; 
-ms-transform-origin: 20px; 
-o-transform-origin: 20px; 
-webkit-transform-origin: 20px; 
transform-origin: 20px; 
border-top-right-radius: 10px; 
border-top-left-radius: 10px; 
-moz-border-radius-topright: 10px; 
-moz-border-radius-topleft: 10px; 
-webkit-border-top-right-radius: 10px; 
border-top-width: 4px; 
border-right-width: 4px; 
border-bottom-width: 4px; 
border-left-width: 4px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: rgb(255,255,255); 
border-right-color: rgb(255,255,255); 
border-left-color: rgb(255,255,255); 

回答

1

是否缺少

-MS-變換:旋轉(90度);

0

由於IE瀏覽器的問題,我建議您使用圖片而不是純CSS3。

我測試過這個網站http://www.cssrotate.com/在IE8和CSS3轉換不起作用。但是,如果您不需要圖像,則可以使用filter在IE中旋轉元素。這裏有LINK1LINK2。您可以看到很好的演示HERE(在IE中打開以查看輪播)。這是開始,你可以谷歌它更多。使用的

例如:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

的BasicImage濾波器的旋轉屬性可以接受四個值之一:0,1,2,或3,其將旋轉元素0,90,180或270輩分分別。