Повернутый текст в IE, помогите пожалуйста

AlexV · February 19, 2012

Уважаемые спецы по HTML верстке!

Моя задача - повернуть текст на минус 90 градусов. Код ниже работает как надо в FireFox 10, но в IE6,7,8 и т.д. не работает, хотя уже много рецептов, найденных на разных сайтах, перепробовал.

Буду весьма благодарен, если поможете повернуть текст и в IE.

<!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" xml:lang="ru" lang="ru">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Vertical text IE test</title>

  <style type="text/css">

.bookm_title {
  width:250px;
  height:22px;
  margin-top:116px;
  margin-left:-105px;
  border: 1px solid red;
  text-align:right;
  display:block;
  font-size:22px;
  color:#a4a4a4;

  -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(-90deg);  /* FF3.5+ */
      -ms-transform: rotate(-90deg);  /* IE9 */
       -o-transform: rotate(-90deg);  /* Opera 10.5 */
          transform: rotate(-90deg);

             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0, M12=1, M21=-1, M22=0, sizingMethod='auto expand');
               zoom: 1;

/* зн-я M11,M12,M21,M22 подобрал на http://css3please.com, но в IE8 коряво все равно.*/

  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0,M12=1,M21=-1,M22=0); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0,M12=1,M21=-1,M22=0)"; */ IE8 */
}

  </style>

</head>

<body>

<div class="bookm_title">Повернутый текст</div>

</body>
</html>

psywalker · February 19, 2012

Вот, по идее должно работать везде.

.block {
  -webkit-transform: rotate(-90deg);  
     -moz-transform: rotate(-90deg);  
      -ms-transform: rotate(-90deg);  
       -o-transform: rotate(-90deg);  
          transform: rotate(-90deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(
                     M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, sizingMethod='auto expand');
               zoom: 1;
}

AlexV · February 20, 2012

Спасибо. Понял в чем проблема. Просто пришлось CSS-хаками св-в подиграть.

margin-top и margin-left оказались за экраном в IE8.

Edited February 20, 2012 by AlexV

Sign In

Повернутый текст в IE, помогите пожалуйста

Question

AlexV

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

AlexV

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information