Chrome неправильно отображает span в div - PullRequest
Новая
       5

Chrome неправильно отображает span в div

3 голосов
/ 27 февраля 2010

Когда интервал вложен в элемент div с другим фоном, над и под ним появляется небольшой разрыв. FF так не рендерится.

Вот HTML: 

<html>
 <body>
  <div style="background-color:magenta">
   <span style="background-color:cyan">Nested</span>
  </div>  
  <div style="background-color:cyan">Can you see that magenta line ?</div> 
 </body>
</html>

Кто-нибудь испытывал это?

Спасибо PS: я использую Chrome 5.0.307.9 beta под Xubuntu 9.10

1 Ответ

7 голосов
/ 27 февраля 2010

Проблема по умолчанию line-height. Браузеры различаются по тому, как они определяют высоту строки по умолчанию («нормальная»), но многие делают это касанием более 1em (высота пролета по умолчанию). Попробуйте явно установить высоту строки в 1em: 

<span style="background-color:cyan;line-height:1em;">Nested</span>

или 

<div style="background-color:magenta;line-height:1em;">

Если вы хотите использовать высоту строки больше 1em, вам нужно отметить интервал display:inline-block, чтобы его цвет фона заполнил высоту линии, а не только 1em встроенного пролета. : 

<div style="background-color:magenta;line-height:2em;">
  <span style="background-color:cyan;display:inline-block;">Nested</span>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...