странное поведение html5 - PullRequest
Новая
       1

странное поведение html5

1 голос
/ 20 сентября 2010

Следующий html (5) создает черную линию в нижней части div. Это вызвано тем, что div get выше, чем содержащееся в нем изображение. Но мне интересно, почему это происходит? 

<!DOCTYPE html>
<html>
  <body>
    <div style="position:absolute; background:#000;">
    <img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="height:50px;">
    </div>
  </body>
</html>

Я не думаю, что это ошибка браузера, потому что результат в Firefox, Chrome и Opera одинаков. Это прекрасно, когда используется тип документа XHTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Кстати: он работает и в html5, но только когда я устанавливаю display: block для изображения. Это действительно нужно?

Ответы [ 2 ]

1 голос
/ 20 сентября 2010

Это не доктайп XHTML как таковой, который меняет его, это скорее строгий, чем переходный.

Использование переходного типа документа XHTML 1.0 переводит браузер в режим ограниченных причуд, тогда как тип документа в стиле HTML5 выбирает режим стандартов.Выравнивание изображений по вертикали между двумя режимами различно.

Вы можете увидеть одну и ту же черную линию, если вы используете <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, которая также переводит браузер в стандартный режим.

ЕстьКоличество способов убрать черную линию.Один из них - установить img на display:block.Другой способ - установить img на vertical-align:bottom.

0 голосов
/ 20 сентября 2010

Черная полоса показывает цвет фона. Если вы не хотите видеть черный, один из вариантов - удалить background:#000 из атрибута стиля вашего div.

Кроме того, почему вы используете height: 50px в вашем атрибуте стиля? Если вы пытаетесь изменить размер самого изображения, используйте атрибут height.

ВАРИАНТ 2:

Этот код, похоже, также удаляет форму черного фона: 

<!DOCTYPE html>
<html>
  <body>
    <div style="background:#000;">
    <img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="position:absolute; height: 50px;">
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...