стиль пробелов в html - PullRequest
Новая
       26

стиль пробелов в html

0 голосов
/ 17 февраля 2011

вот пример файла HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<p>--------------------------------------</p>
<p><span style="font-size:100px"><span style="font-size:10px">line 1</span>X</span></p>
<p>--------------------------------------</p>
<p><span style="font-size:100px"><span style="font-size:10px">line 2</span></span></p>
<p>--------------------------------------</p>
</body>
</html>

Текст "строка 1" находится рядом с символом X в 100 точек, который, очевидно, изменяет высоту всей линии. таким образом, между первым и вторым рядом штрихов разрыв больше, чем между вторым и третьим. пока никаких сюрпризов: -

Теперь замените X пробелом. в IE8 или Firefox расстояние между строками такое же, как и во время X; однако в chrome или safari линия 1 становится такой же высоты, что и линия 2, как если бы стиль внешнего диапазона не применялся к пространству.

Есть ли правильный или неправильный ответ на это поведение или это слишком мелкая деталь, чтобы быть охваченной стандартом HTML?

Верьте или нет, это на самом деле вызывает большие хлопоты для меня; пробел генерируется чем-то вне моего контроля. Любые мысли о том, как повторить поведение chrome / safar в других браузерах, будут приветствоваться

1 Ответ

0 голосов
/ 17 февраля 2011

Установите минимальную высоту в каждой строке, и она не будет уменьшаться, если текст отсутствует. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p.line
{
  min-height: 120px;
}
</style>
</head>
<body>
<p>--------------------------------------</p>
<p class="line"><span style="font-size:100px"><span style="font-size:10px">line 1</span>X</span></p>
<p>--------------------------------------</p>
<p class="line"><span style="font-size:100px"><span style="font-size:10px">line 2</span></span></p>
<p>--------------------------------------</p>
</body>
</html>
...