Высота линии CSS меньше размера шрифта приводит к нечетному переполнению в div

Я столкнулся с каким-то странным поведением CSS. Тем не менее, он работает точно так же в Firefox, Chrome и IE (9), поэтому я подозреваю, что это часть стандарта CSS, однако я не могу найти никакой ссылки на то, почему это может быть так.Высота линии CSS меньше размера шрифта приводит к нечетному переполнению в div

У меня есть div с некоторым текстом в нем. Когда я устанавливаю размер шрифта больше высоты строки, высота div вычисляется с использованием высоты строки, но контент намного больше. То есть текст в поле намного больше, чем сам ящик. У меня есть jsfiddle с ситуацией здесь:

http://jsfiddle.net/RVgzV/4/

При перемещении мыши над ограничительной рамки, вы можете увидеть парения CSS активирует прежде чем войти в DIV. Аналогично, нажатие рядом, но все же вне поля активирует событие javascript click. Это немного легче увидеть, где коробка содержание здесь:

http://jsfiddle.net/RVgzV/5/

Высота правильно рассчитал, когда дисплей объекта на DIV установлен на инлайн (который я не могу сделать по разным причинам стайлинга). Кроме того, проблема решена, если я устанавливаю свойство переполнения скрытым. Для меня это означает, что контент больше, чем его поле, но я не уверен, почему. В частности, я хочу знать, почему свойство модели «height» css box объекта меньше его фактической высоты, как показано на странице.

Я просмотрел спецификацию CSS, и я не видел там своего ответа, но я подозреваю, что там что-то там отсутствует.

Редактировать

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

Кроме того, в ответ на некоторые ответы, которые я получил, я не ищу, как исправить мой css, поэтому проблема с hover больше не появляется, я ищу , почему это происходит в первую очередь.

Редактировать Опять Видимо, какое-либо содержимое коробки, независимо от того, внутри границ приставке или не парить вызывает на поле. (См. Комментарий г-на Листера по адресу This answer. Что мне действительно хотелось бы узнать, это где в спецификации это поведение происходит. Является ли он там? Или это реализация, о которой все о себе говорят?

источник

2012-04-10 Daniel Yule

Поскольку вы можете сделать div большим, увеличив высоту строки текста внутри него, вполне естественно, что вы также можете уменьшить div, уменьшив высоту линии. Для меня единственным сюрпризом здесь является то, что область зависания стала непрямоугольной. –

Да, и это то, что меня тоже удивляет. Я был _hoping_, чтобы сделать поле меньшим, используя линейную высоту, что я не хотел, это поведение наведения (которое, как я уже упоминал, можно решить, используя overflow: hidden) –

The div Вы неправильно использовали CSS. Высота div определяется количеством строк в нем. Вы указали больший размер шрифта, чем длина строки, что означает, что это может быть . только взял макс-высоту строки, чтобы определить количество необходимых линий

Кстати, какой смысл делает это, чтобы определить шрифт заклинивания больше, чем высота линии

источник

2012-04-10 17:28:59

Очевидно, что я неправильно использую CSS, или я будет получать другой результат. Мой вопрос больше: каким образом я неправильно использую CSS? Спецификация специально говорит о том, что размер шрифта может быть больше высоты линии. –

Тогда парень, который написал спецификации, не думал об этом. То же самое, как пытаться упаковать бар-стул в коробке для обуви. –

В этом конкретном случае я хотел бы сделать мои тире больше, чем они были бы в противном случае, без расширения размера содержащего окна. Но почему это не очень важно; Я уверен, что есть много случаев, когда вам может понадобиться что-то подобное. Вопрос в том, почему, если я следую спецификации CSS, происходит ли это поведение и где оно указывается. –

Использование переполнения: скрытый, чтобы скрыть что-либо за пределами div.

Действует правильно, так как дети могут существовать & быть парящим за пределами площади блока элемента.

Этот метод часто используется для перемещения внутренних кусков элементов блока с использованием отрицательного поля/заполнения/абсолютного позиционирования и т. Д., Но эти части всегда будут поддерживать способность родителя к зависанию.

источник

2012-04-10 17:49:53 LessQuesar

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

По-видимому, каждый ребенок из div получает зависание div, даже если они находятся вне границ div. См. [This jsFiddle] (http://jsfiddle.net/RVgzV/8/), где span находится далеко за пределами div, но все же вносит вклад в свойства div. Как я уже сказал, я тоже был удивлен! Но это объясняет это. –

Я бы поднял этот комментарий, если бы у меня было достаточно репутации, но, к сожалению, нет. Мне все еще интересно, является ли эта деталь реализацией, общей для всех браузеров, или частью спецификации. Я уточню вопрос, чтобы отразить это. Кроме того, если вы переписываете свой комментарий в качестве ответа, и никто не может адекватно объяснить, какая часть спецификации css указывает на это поведение, я соглашусь с ним. –

Высота линии CSS меньше размера шрифта приводит к нечетному переполнению в div

ответ

Смежные вопросы