Как изменить размер элемента, повернутого в CSS, чтобы соответствовать новой области в IE9? - PullRequest
Новая
       13

Как изменить размер элемента, повернутого в CSS, чтобы соответствовать новой области в IE9?

3 голосов
/ 26 марта 2011

Плагин Easy Accordion jQuery использует вращение CSS для создания вертикальных вкладок аккордеона. Смотри: http://www.madeincima.eu/samples/jquery/easyAccordion/

Вращение выполняется с помощью следующего CSS: 

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

/* Firefox */ 
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px 0px; 

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Прекрасно работает в последних версиях FF и Chrome, но в IE9 тонко ломается. Хотя вращение велико, на вкладке аккордеона больше нельзя щелкать по всей ее высоте. Вместо этого кликабельна только небольшая ширина сверху (как если бы сам элемент был повернут, а область кликабельности не была).

Я пытался исправить это с помощью преобразования Matrix, которое устанавливает sizingMode в «автоматическое расширение», но это не работает.

Я также заметил, что SlideDeck (http://slidedeck.com) также страдает от той же проблемы в IE9.

Это ошибка в IE9, или мы должны использовать что-то еще для вращения сейчас?

Ответы [ 2 ]

1 голос
/ 30 марта 2011

это не так :( Я случайно наткнулся на этот пост, когда искал ТОЧНУЮ проблему. -Ms-transform: rotate (-90deg) превращает вывод в нечто неузнаваемое. Однако я думаю, что это правильный путь, потому чтов середине беспорядка есть случайная вкладка, которая полностью кликабельна И градиент не портит номер слайда :) попробуйте еще раз Remixz?Я попытался поиграть с приведенной выше строкой кода, но, похоже, ничего не получилось.

** edit: по причине, которую я не понимаю, если вы измените ее на: -ms-transform: rotate (0deg);оно работает!Ну, по крайней мере, вкладка полностью интерактивна ... номер слайда все еще разжевывается, но это только для людей, которые используют номер слайда И не изменили фоновое изображение / цвет на что-то другое

0 голосов
/ 30 марта 2011

Попробуйте использовать встроенное в CSS3 преобразование IE9. Это ДОЛЖНО работать так же, как преобразования CSS3 в других браузерах. Код: 

  -ms-transform:rotate(-90deg);

В сочетании со всеми вашими текущими CSS это конечный результат: 

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

/* Firefox */ 
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px 0px; 

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-transform:rotate(-90deg);

Надеюсь, это то, что вы хотели! :)

...