IE8旋轉過濾器旋轉div但不是文字

我目前正試圖旋轉包括所有瀏覽器上的文本。 IE8 +。我已經爲所有其他瀏覽器設置了轉換，但是當涉及到IE8時，我只能讓該框旋轉，文本不會隨之旋轉。IE8旋轉過濾器旋轉div但不是文字

在這裏看到： https://dl.dropboxusercontent.com/u/106547/rotate/rotate.html

標記：

<div id='container' class='container'> 
<p class='rotated'> 
My view has been loaded 
</p> 
text 
</div>

風格：常規 -

.rotated{ 
     display: block; 
     position: relative; 

     /* Safari */ 
     -webkit-transform: rotate(-90deg); 

     /* Firefox */ 
     -moz-transform: rotate(-90deg); 

     /* IE */ 
     -ms-transform: rotate(-90deg); 

     /* Opera */ 
     -o-transform: rotate(-90deg); 

     transform: rotate(-90deg); 



    }

和IE8條件

<!--[if lt IE 9]> 
<style type="text/css"> 
.rotated, .container{ 
    zoom:1; 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 
</style> 
<![endif]-->

，你可以在這裏看到，在div /段落標記旋轉，但文本保持水平：

我一直戳掉在這一段時間，似乎無法找出爲什麼不旋轉。我現在不擔心旋轉位置，我只是想讓它旋轉。任何想法有什麼不對？謝謝。

來源

2013-07-18 MoDFoX

爲什麼在IE8特定的CSS中同時旋轉'.rotated'和'.container'？ –

這是更多的看看是否只有一個旋轉是我的問題。除了測試目的，我沒有真正的理由去做這件事。 – MoDFoX

老年人IE瀏覽器，你應該看看writing-mode後轉動整個盒子:)

http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

來源

2013-07-18 14:51:06

哦！那很容易，而且似乎很適合我的目的。謝謝！我會盡可能地回答。 – MoDFoX

無論如何，只要告訴我們，如果它做到了;） –

確實有效。謝謝。 – MoDFoX

你的IE8樣式使用以下選擇.rotated, .container，而你的正常風格只旋轉.rotated。

這很可能是問題的根本原因：IE8風格告訴瀏覽器嘗試旋轉container和rotated元素。由於一個在另一個內部，這意味着它將嘗試旋轉兩次內部元素。

從理論上講，這意味着it would end up being upside-down, but we're dealing with IE's activeX過濾器樣式在這裏，他們被稱爲炸燬時，你把它們，所以給我可以理解爲什麼它會顯示文本不旋轉。

如果你在舊IE中做了很多旋轉的東西，你可能也想知道CSS Sandpaper library。這是一個小型的Javascript polyfill lib，它爲舊版本的IE添加了對（接近）標準transform CSS的支持。使用這種方式可以讓生活更容易lot，因爲您可以對所有瀏覽器使用相同的語法，而不必擔心醜陋的filter樣式。

來源

2013-07-18 14:56:00 Spudley

-1

你在當地工作嗎？ Internet Explorer的篩選器只能在線工作。

來源

2013-11-29 09:30:15

IE8旋轉過濾器旋轉div但不是文字

回答

相關問題