Удалите отступ элемента встроенного пролета - PullRequest
Новая
       16

Удалите отступ элемента встроенного пролета

0 голосов
/ 03 февраля 2012

У меня есть два встроенных элемента.Вы можете предположить, что они абсолютно одинаковы, за исключением того, что положение одного установлено на абсолютное значение, и оно расположено ниже другого.Вот так: 

<body style="text-align: center;">
<span style="background-color: #000; color: white; font-size: 300px; line-height: 1; padding: 0; position: relative;">
    AAA <span style="background-color: #333; color: white; font-size: 300px; line-height: 1; padding: 0; position: absolute; top: 100%; left: 0;">AAA</span>
</span>
</body>

Fiddle: http://jsfiddle.net/CSPFL/5/

И, конечно, полноэкранная скрипка: http://jsfiddle.net/CSPFL/5/show/

Пролеты не одинаковой высоты!Статический диапазон имеет некоторый вид заполнения.Можно ли убрать этот отступ, не меняя положение на абсолютное?Заранее спасибо!

РЕДАКТИРОВАТЬ: вы можете видеть, что они не одинаковой высоты, если вы измените влево на 100% и сверху до 10%.Они кажутся одинаковыми по высоте в FF для Mac.

Ответы [ 2 ]

0 голосов
/ 03 февраля 2012

Проблема может быть выделена в зависимости от position: absolute.Просто добавив его в правила для span, который имеет line-height: 1, вы измените его внешний вид.Это зависит от разных алгоритмов расчета высоты для разных типов элементов (часть хитрой стороны CSS).

Поскольку ваша проблема в том, что непозиционированный span слишком высокий, это может помочь повернуть егок элементу блока (или встроенному блоку) при визуализации: добавьте 

display: block

или 

display: inline-block

для span.

0 голосов
/ 03 февраля 2012

попробуйте это: 

<span style="background-color: #000; color: white; font-size: 300px;  padding: 0;float:left;">AAA</span>
<span style="background-color: #000; color: white; font-size: 300px;  padding: 0; position: absolute;float:left;">AAA</span>

http://jsfiddle.net/CSPFL/1/

...