Вращение CSS и IE: абсолютное позиционирование нарушает IE - PullRequest
Новая
       10

Вращение CSS и IE: абсолютное позиционирование нарушает IE

6 голосов
/ 13 апреля 2010

Я пытаюсь повернуть различные текстовые блоки, чтобы они были вертикально ориентированы, и расположить их в очень определенных местах на диаграмме, которая будет предварительно просматриваться, а затем распечатываться. CSS очень хорошо вращает текст в IE, FF, даже в Opera.

Но когда я пытаюсь расположить повернутый элемент, IE 7 и 8 (не беспокоятся о 6) полностью ломаются, и элемент остается в своем первоначальном положении. Есть ли способ обойти это? Мне действительно нужен контроль пикселей, где расположены эти метки.

HTML 

  <div class="content rotate">
    <div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div>
    <div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div>
  </div>

CSS 

div.content {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; }

.rotate  {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

.txtblock {
    width: auto;
    position: absolute;
    }

#Div1 {
    left:44px; 
    top:70px; 
    border:red 3px solid; }

#Div2 {
    left:13px; 
    top:170px; 
    border:purple 3px solid;  }

Ответы [ 3 ]

5 голосов
/ 04 ноября 2010

Это звучит как проблема, с которой я провел много времени. Я оставил два комментария к сообщению в блоге Пола Айриша , в котором подробно изложены мои выводы. Вот что я написал:

IE6 и 7: Вы должны заявить как минимум высота или ширина на div это будет вращаться до вашего фильтры вращения появляются в CSS. Даже если вы делаете это, однако, любой стили, примененные к этому div после фильтры поворота появляются в коде не будет применяться. Кажется, то же самое быть верным для любых стилей, примененных к этому дети div тоже. Weird.

IE8: похоже, это не проблема. я успешно примененные стили к div (включая объявление его высоты или ширина в первый раз) после фильтры поворота появляются в коде.

... и более странные ротации CSS, чтобы сообщить:

В IE6 и 7, даже если вы следуете правила я отправил несколько комментариев назад, вы все равно полностью сломаете свой сайт если вы используете более одного поворота фильтр для каждого внешнего файла CSS. Вы либо должны иметь отдельные файлы CSS за фильтр вращения или просто добавьте каждый фильтр вложен в свой уникальный теги стиля в заголовке вашего HTML. В противном случае будет отображаться только первый повернутый объект, но даже этот будет расплывчатым и при неправильном угол.

Весело, удаляя DOCTYPE вызывает ротацию отлично, поэтому я предполагаю причудливый режим знает, как справиться с множественным вращением фильтры? Кроме того, с большим, более сложная таблица стилей, были даже странные побочные эффекты, но я не мог точно определить, что было причиной тех. В любом случае ...

Принять домой сообщение:

Использовать только 1 собственный фильтр ms: (при использовании по крайней мере) внешняя таблица стилей. и .. каждый Фильтр вращения в вашем HTML должен быть в своем собственном наборе тегов стиля.

Несмотря на то, что моя проблема немного отличалась, вы можете столкнуться с аналогичной ситуацией, когда два внутренних делителя поворачиваются родителем. Это стоит попробовать. По крайней мере, попробуйте переместить декларацию .rotate в конец таблицы стилей.

2 голосов
/ 13 апреля 2010

Попробуйте этот код: 

<!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">
<head>
    <title>Centrsource najboljše Ponudbe</title>
    <style type="text/css">
    #content {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; 
    }

.txtblock {
 display:block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }


    </style>
</head>
<body>
<div id="content">
    <div class="txtblock">Ardvark Avacado<br />Awkward</div>
</div>
</body>

</html>

Вы применяете код не к тому элементу. Также как ссылка на других в понимании этого http://snook.ca/archives/html_and_css/css-text-rotation

0 голосов
/ 13 апреля 2010

Я считаю, что это работает, если вы помещаете повороты в txtblocks, а не во внешний контейнер.

Демо

...