Почему IE (и Firefox 4) неправильно оборачивают это?(HasLayout ??) - PullRequest
Новая
       37

Почему IE (и Firefox 4) неправильно оборачивают это?(HasLayout ??)

2 голосов
/ 19 мая 2011

У меня есть следующее (http://jsfiddle.net/gVZwr/4/): 

<div>
    <label>From</label>
    <span>Some Content Goes Here</span>
</div>

span {
    display: inline-block;
    overflow:hidden;
}

в IE8 / 9, метка и интервал не совпадают (метка ниже, чем интервал).

Почему ??? Я могу это исправить, поставив overflow:hidden на этикетке, но я хочу знать, что является причиной этого. Я попробовал старые исправления hasLayout, такие как zoom:1 на этикетке, но ничего не кажетсяисправить это за исключением, в частности, overflow.

Ответы [ 4 ]

5 голосов
/ 19 мая 2011

Ваша проблема в том, что inline-block элементы с overflow, установленным на что-то отличное от visible, имеют базовую линию, которая находится у нижнего края поля (фактически, у нижнего поля поля) вместо базовой линиина базовой линии текста.См. http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align самый последний абзац.

Тогда эта базовая линия, которая в основном соответствует нижнему краю границы span в вашей ситуации, выравнивается с базовой линией label, который является фактической базовой линией текста в метке.Таким образом, текст label визуально заканчивается под текстом span.

WebKit здесь не соответствует спецификации и, похоже, не желает изменять это, потому что есть WebKit, не относящийся к Web.содержание, которое зависит от его текущего поведения.Вот почему вы не видите эффекта в WebKit.

Opera 11 делает то же самое, что и IE и Firefox здесь, по спецификации.

Да, и что касается исправления, вы можете либоизмените вертикальное выравнивание label или уберите overflow на span, предполагая, что вам действительно нужно, чтобы span было inline-block.

3 голосов
/ 19 мая 2011

Попробуйте выровнять по вертикали: http://jsfiddle.net/gVZwr/2/

2 голосов
/ 19 мая 2011

Как насчет создания <label> inline-block?Я думаю, что inline-block влияет на вертикальное выравнивание элементов.

(И, не по теме, см. Ответ @ josmh о том, для чего предназначен <label>, то есть маркировка полей формы.)

0 голосов
/ 19 мая 2011

Это, вероятно, потому что <label> должен быть привязанным к чему-то .Вот некоторые примеры .

...