2012-03-08 3 views
1

Я задам еще один вопрос!CSS Поворот IE7 и 8

Итак, CSS Rotate работает в ie9, но получить поворот для работы в предыдущей версии будет смертью меня!

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

Эта строка кода поворачивает элементы на 90 градусов, но имеет такое же происхождение, что и другие браузеры. Если элемент находится слишком близко к стороне страницы, он может быть повернут наружу. В документах Microsoft Microsoft не указывается, как установить происхождение трансформации.

Мой полный код:

#quick { 
    position:fixed; 
    top:250px; 
    left:-158px; 
} 
#qmenu-wrapper { 
    background-image: url(../images/img_08.png); 
    background-repeat:repeat-x; 
    height: 35px; 
    width:350px; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform:rotate(90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

} 

Есть ли то, что мы можем сделать для IE 7 и 8 ручек вращения таким же образом, как и 9?

Спасибо.

Me!

+1

Вы могли бы хотеть рассмотреть попытку JQuery повернуть: http://code.google.com/p/jqueryrotate/ – aroth

+0

возможно дубликат [CSS повернуть свойство в IE] (http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie) – Liam

ответ

4

IE5.5, IE6, IE7 и IE8 поддерживаются filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); IE5 не поддерживает его!

Source

Для изменения вращения координат с помощью DX Фильтры просто использовать Matrix фильтр, чтобы изменить положение вашего элемента. Вы можете иметь несколько фильтров для одного элемента. Вам нужно сделать небольшую математику. Удачи с этим!

4

Посмотрите на заголовок слева от this site. Я решил проблему с точкой ротации, поместив элемент в меньший элемент с overflow:visible и повернув этот элемент. Другими словами, я сделал свой собственный опорный пункт.

В этом примере я также использую режим записи, чтобы повернуть текст в IE, поскольку использование фильтров отключает сглаживание шрифтов.

<style type="text/css"> 
/* This wrapper is required to rotate the text around the left edge */ 

#page_title { 
overflow: visible; 
position: absolute; 
width: 38px; 
-moz-transform: rotate(90deg); 
-moz-rotation-point: 0 0; 
-webkit-transform: rotate(90deg); 
-webkit-rotation-point: 0 0; 
-o-transform: rotate(90deg); 
-ms-writing-mode: tb-lr; 
* html writing-mode: tb-lr; 
} 

#page_title h1 { 
display: block; 
font-size: 70px; 
font-weight: normal; 
line-height: 38px; 
color: #F3C1E0; 
font-variant: small-caps; 
width: auto; 
} 
</style> 

<div id="page_title"> 
<h1>Inwardpath&nbsp;Publishers</h1> 
</div> 
+0

Это работает только в IE8 и выше. –

Смежные вопросы