Jump to content
  • Sign Up
  • 0

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


AlexV

Question

Уважаемые спецы по 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>

Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

.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;
}

  • Like 2
Link to post
Share on other sites
  • 0

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

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

Edited by AlexV
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy