DIV + SPAN + Firefox

oxid · August 6, 2012

Здравствуйте! Напоролся на удивительное поведение firefox при размещении элемента внутри DIV.

Поскольку тема невероятно избитая, хочу сразу заметить, что мне абсолютно без разницы, как будет выровнен текст по вертикали внутри DIV, главное, чтобы эта конструкция выглядела одинаково во всех браузерах.

Итак, имеем браузеры

ie 8.0
chrome 21.0
firefox 14.0.1
opera 12.01

простейшую конструкцию:

<html>
	<head>
		<title></title>
		<style type="text/css">
			div {
				text-align: center;
				width: 64px;
				height: 32px;
				border: 1px solid black;
				position: absolute;}
			span {

				font-weight: bold;
				font-size: 20pt;
				font-family: Arial;}
		</style>
	</head>
	<body>
		<div>
			<span>123</span>
		</div>
	</body>
</html>

Во всех браузерах этот код выглядит одинаково - 5px от верхнего края символов до верхнего края рамки DIV, но в firefox этот отступ 6 пикселов!

Ума не приложу, что с этим можно сделать.

Может вы подскажете? Единственное условие - position: absolute; убирать нельзя, т.к. этот DIV у меня должен быть чётко спозиционирован.

Ergonav · August 6, 2012

Нет ресета

oxid · August 6, 2012

Нет ресета

Пробовал некоторые, эффекта относительно данного бага 0. Или что конкретное предложите?

Yazon_Nile · August 7, 2012

Очень станный код.

Во-первых, если элемент абсолютно позиционирован ему нужно задать лефт/райт и боттом/топ.

Во-вторых, нету лаин-хеита! Вообще не пойму как вы выравниватете елемент.

oxid · August 7, 2012

Очень станный код.
Во-первых, если элемент абсолютно позиционирован ему нужно задать лефт/райт и боттом/топ.
Во-вторых, нету лаин-хеита! Вообще не пойму как вы выравниватете елемент.

Да, я знаю зачем нужно абсолютное позиционирование А в примере убрал, так как к теме вопроса не относится - меня не интересует позиционирование самого DIV, а только Span внутри него.

Поэкспериментировал с line-height - при значении "nomal" ситуация не меняется, попробовал указать в пикселах - всё подровнялось. Ну чтож, спасибо и за это

Sign In

DIV + SPAN + Firefox

Question

oxid

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Ergonav

Link to comment

Share on other sites

oxid

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

oxid

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information