Выравнивание текста ведет себя по-разному, когда диапазон заблокирован + абсолютно позиционируется - PullRequest
Новая
       2

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

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

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

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

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

  1. Почему диапазон классов стрелок ведет себя по-разному в Chrome иFF11 (по какой-то причине FF7 имеет поведение Chrome)?
  2. Какой браузер показывает «правильные» свойства наследования диапазона?
  3. Я могу заставить оба браузера вести себя одинаково, создав текстовый классspan это встроенный блок, но я не понимаю, почему это помогло бы ...
  4. Так как span текстового класса - это блокированный span, он не должен вызывать span класса контейнера (и его границы) быть 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;
}

Помощь оценена, спасибо!

1 Ответ

0 голосов
/ 21 марта 2012

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

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

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

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

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

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

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

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

Ps: использовать абсолютную позицию, только если вы определяете расстояния.

...