Text-align ведет себя по-другому, когда диапазон заблокирован + абсолютно позиционирован

Я немного искал, но не смог найти ответ, который искал. Если это дубликат, пожалуйста, дайте мне направление.

В любом случае, у меня возникли проблемы с выяснением поведения наследования (если таковое имеется) для промежутков, и Firefox и Chrome, похоже, различаются, когда я начинаю создавать разные комбинации стилей в промежутках.

В частности (подробнее см. Ниже) у меня есть обычный встроенный, абсолютно позиционированный, центрированный по тексту контейнер диапазона, который содержит еще два диапазона, один встроенный блокированный, абсолютно позиционированный (class = "arrow") и один заблокированный диапазон ( класс = "текст"). В Chrome диапазон классов стрелок выравнивается по левому краю внутри контейнера. Однако в FF11 диапазон класса стрелки выравнивается по центру внутри контейнера.

Итак, мои вопросы:

  1. Почему диапазон классов стрелок ведет себя по-разному в Chrome и FF11 (FF7 по какой-то причине имеет поведение Chrome)?
  2. Какой браузер показывает "правильные" свойства наследования диапазона?
  3. Я могу заставить оба браузера вести себя одинаково, сделав диапазон текстового класса встроенным блоком, но я не понимаю, почему это могло бы помочь ...
  4. Поскольку диапазон текстового класса является заблокированным диапазоном, не должно ли это привести к тому, что диапазон класса контейнера (и его границы) будут иметь 100% ширину? Прямо сейчас класс контейнера сворачивается вокруг диапазона текстовых классов. (Вероятно, это будет отдельная тема, но было бы неплохо, если бы я смог быстро ответить на этот вопрос).

DisplayProps.html:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="displayProps.css">
    </head>
    <span class="container">
        <span class="arrow"></span>
        <span class="text">Why is the arrow different?</span>
    </span>
</html>

displayProps.css:

span.container {
    display: inline;
    position: absolute;
    border: 2px solid; 
    text-align:center;
}

span.container span.arrow { 
    border-color: transparent black transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    display: inline-block;
    position: absolute;
}

span.container span.text {
    display: block;
}

Помощь приветствуется, спасибо!


html position text-align
person DKT    schedule 21.03.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Стрелка имеет абсолютное положение, но вы не определили верхнее / нижнее и левое / правое значения. Таким образом, браузеры принимают значения по умолчанию, которые отличаются.

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

span.container span.arrow {
    ...
    top: 10px;
    left: 10px;
}

См. Также этот пример.

=== ОБНОВЛЕНИЕ ===

Если вы измените контейнер на относительное положение и отображение блока, ширина будет 100%.

span.container {
    display: block;
    position: relative;
    ...
}

См. обновленный пример.

P.s .: используйте абсолютное положение, только если вы определяете расстояния.

person scessor    schedule 21.03.2012
comment
Ах я вижу! Итак, эти значения по умолчанию из браузера зависят от text-align: center в диапазоне контейнера? Похоже, что если я удалю text-align: center из контейнера, стрелка снова вернется в левую сторону. - person DKT; 21.03.2012
comment
Да, они могут. Используйте абсолютное положение только с расстояниями (это причина использования абсолютного значения, в противном случае - относительного). - person scessor; 21.03.2012
comment
Причина, по которой я использую absolute, заключается в том, что я хочу, чтобы эти два промежутка (особенно класс стрелки) были удалены из потока вызовов, что, как мне кажется, я могу сделать только с помощью абсолютного позиционирования. - person DKT; 21.03.2012
comment
Кроме того, я больше поигрался с css и нашел еще одну интересную вещь. Похоже, что если диапазон текстового класса является неблокирующим элементом, значения по умолчанию для диапазона стрелки снова изменяются на 0 пикселей. - person DKT; 21.03.2012