Safari и Chrome, положение повернутого текста теряет популярность - PullRequest
Новая
       23

Safari и Chrome, положение повернутого текста теряет популярность

4 голосов
/ 07 марта 2012

ну, я обычно нахожу ответ на свои вопросы здесь, но на этот раз я не нашел, поэтому сейчас я задам свой первый здесь!:)

У меня есть повернутый текст на моей странице, и он позиционируется с использованием позиции: абсолютная, как показано ниже: 

.rotate-box .rotate-text{
    display: block;
    -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
    left: -45px;
    top: 170px;
}

<div class="rotate-box">
    <span class="rotate-text">Rotated text</span>
</div>

Это прекрасно работает во всех браузерах (с веб-набором), кроме Safariи Chrome, где текст отображается примерно на 90 пикселей ниже, чем в других браузерах.

Чтобы предотвратить это, я добавил: 

@media screen and (-webkit-min-device-pixel-ratio:0){
    .rotate-text {top: 80px !important;}
}

Теперь текст находится в правильном месте во всех браузерах, номне это не кажется правильным ... Я что-то здесь упускаю?

Я ненавижу добавлять код исключения браузера, он имеет тенденцию возвращаться и кусать вас в долгосрочной перспективе ...: o

С уважением, Андерс

Ответы [ 2 ]

2 голосов
/ 19 октября 2012

Измените эту строку: 

-webkit-transform: rotate(90deg);

на 

-webkit-transform: rotate(90deg) translate(-100px, 16px);

Как вы знаете, эта строка используется только браузерами веб-наборов (Safari, Chrome)

Возможно, вам придется поиграться с точными значениями px, но тогда вы сможете избавиться от дополнительного тега @media screen.

1 голос
/ 07 марта 2012

Посмотрите на transform-origin.По сути, вы должны быть в состоянии сделать transform-origin: 0 0; (со всеми префиксами, конечно), и он перехватит вращение в верхнем левом углу, что звучит так, как вы хотите.

...