Странное поведение chrome / safari в отношении направления: rtl - PullRequest
Новая
       5

Странное поведение chrome / safari в отношении направления: rtl

0 голосов
/ 16 ноября 2010

В Internet Explorer, FireFox и Opera код ниже создает красный плавающий прямоугольник справа с синим прямоугольником, выровненным по правому краю, как и ожидалось, но в браузерах WebKit (Chrome, Safari) синий прямоугольник выравнивается по левому краю и расширяется за пределами видимой области. Интересно, что если я уберу тег DOCTYPE, эти браузеры будут работать как другие браузеры. Есть ли какая-то логика в этом поведении или это просто ошибка, вы можете придумать обходной путь? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            #top_container {
                float:right;
            }
            #red {
                background:#f00;
                color:#fff;
                padding:10px;
            }
            #blue_container {
                direction:rtl;
            }

            #blue {
                position:absolute;
                background:#00f;
                color:#fff;
                padding:10px;
                width:200px;
                direction:ltr;
            }
        </style>
    </head>
    <body>
        <div id="top_container">
            <div id="red">
                red
            </div>
            <div id="blue_container">
                <div id="blue">
                    blue
                </div>
            </div>
        </div>
    </body>
</html>

1 Ответ

1 голос
/ 16 ноября 2010

ОК, несколько замечаний:

Направление текста (rtl / ltr) не имеет значения.Если вы удалите этот стиль, ситуация будет такой же.

Если вы удалите красный узел, ситуация будет незначительно отличаться, с синим прямоугольником, расширяющимся еще дальше от области просмотра справа.

Вот как я прочитал ситуацию:

  • #top_container содержит только один элемент потока: #red
  • #top_container является float: right.Поэтому он расположен у правого края окна просмотра, что позволяет ширину, требуемую для элемента потока (#red).
  • #blue абсолютно позиционирована относительно #top_container, но не имеет позиционирования,Поэтому он выравнивается по левому краю с красной рамкой и занимает ширину 200 пикселей.

Все это именно то, что я ожидал.Я не могу объяснить, почему другие браузеры делают это по-другому.Почему они выравнивают #blue по правому краю #red?Я не понимаю, почему так должно быть.

В любом случае, вы можете приблизиться к тому, что хотите, добавив right:0 к вашему #blue стилю.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...