HTML: очень странный интервал в строгом режиме, в чем причина? - PullRequest
Новая
       1

HTML: очень странный интервал в строгом режиме, в чем причина?

0 голосов
/ 23 февраля 2012

следующий код 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:200px;height:200px;padding:0px;margin:0px;">
    <div style="background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;">
    <img style="padding:0px;margin:0px;width:200px;height:200px;"  src="http://www.google.com/logos/2012/serbia12-hp.jpg">
</div>
</div>
</body>

С очень странной красной рамкой внизу, я не смог понять, почему это так (как с Chrome, так и с IE).

enter image description here

Если я использую Invalid Doctype, как (без восклицательного знака) 

<DOCTYPE html>

Это работает?

В чем причина этого? Почему изображение не точно такой же ширины и высоты, как внешнее поле (200 на 200 пикселей). Я перепробовал все, но понятия не имею, почему это происходит? Это хмтл Баг или я что не так делаю?

Примечание: Это очень сложная HTML-конструкция. Приведенный выше пример не имеет смысла, но он иллюстрирует проблему. Так что было бы любезно, если бы вы могли объяснить, почему это происходит.

Большое спасибо!

Ответы [ 3 ]

3 голосов
/ 23 февраля 2012

Межстрочный интервал по умолчанию в вашем браузере не делится равномерно на 200. Поскольку <img> отображается как inline по умолчанию, он учитывает межстрочный интервал.Вы видите результат этого.

Установка <img> на display: block; решит вашу проблему.

1 голос
/ 23 февраля 2012

Причина, по которой это происходит (и я предполагаю, что это по спецификации), заключается в том, что изображения выровнены по базовой линии текста. Если вы поместите какой-нибудь текст по убыванию (нижние основы буквенных форм), вы увидите, что он идеально подходит ...

http://jsfiddle.net/LvLPE/

Простое решение - указать браузеру обрабатывать изображение как div с display: block;.

0 голосов
/ 23 февраля 2012

Похоже, вас укусил баг пробела .Два решения:

  1. Удалите пустое пространство вокруг img:

    <div style="background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;"><img style="padding:0px;margin:0px;width:200px;height:200px;" src="http://www.google.com/logos/2012/serbia12-hp.jpg"></div>

  2. Или вы можетедобавьте font-size: 0; к вашему встроенному стилю на оболочке div вокруг img

Кроме того, указание display: block на div является избыточным, вам не нужночто там.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...