БлогNot. "Непонятный отступ" снизу картинки, находящейся в блоке или ячейке - проблема и ...

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

"Непонятный отступ" снизу картинки, находящейся в блоке или ячейке - проблема и её решение

Помогал знакомой сделать несложный макет сайта, вот и провозился битый час с описанной ниже фичей... итак, пишем простой файл HTML, в котором есть строки таблиц, содержащих только картинки.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица только из картинок</title>
</head>
<body>

<table width="90%" cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td>
   <img src="1.gif" width="100%" height="16" style="margin:0px;" alt="">
 </td>
 </tr><tr>
  <td>
   <img src="2.gif" width="100%" height="16" style="margin:0px;" alt="">
 </td>
 </tr>
</table>

</body></html>

Сами картинки могут быть любыми, здесь вот эти для примера:

картинка 1.gif
картинка 1.gif
картинка 2.gif
картинка 2.gif

Этот код корректен, то есть, проходит валидацию на http://validator.w3.org/ для спецификации HTML 4.01 Strict.

Тем не менее, IE7, IE8, Firefox 3.5.9 И Opera 10.51 покажут вот что:

неправильное отображение макета
неправильное отображение макета

Opera 10.0 и Firefox 3.0 покажут следующее:

правильное отображение макета
правильное отображение макета

- что мы, вообще-то, вправе ожидать "по умолчанию".

Указание hspace="0" vspace="0" в теге <img> ничего не даст, кроме предупреждений валидатора о некорректных атрибутах. Ничего не даст и выставление в 0 всевозможных отступов margin и padding.

В инете для этой ситуации встречаются разные советы - например, паковать весь код документа в одну строку - что очень "удобно" и не имеет оснований в спецификации.

Для исправления ситуации достаточно поместить в стиль документа указание

td img { display:block; }

то есть, изменённый документ выглядит теперь так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица только из картинок</title>
<style type="text/css">
<!--
 td img { display:block; }
-->
</style>
</head>
<body>

<table width="90%" cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td>
   <img src="1.gif" width="100%" height="16" style="margin:0px;" alt="">
 </td>
 </tr><tr>
  <td>
   <img src="2.gif" width="100%" height="16" style="margin:0px;" alt="">
 </td>
 </tr>
</table>

</body></html>

и показывается всеми браузерами нормально, то есть, в варианте 2. По-прежнему проходит валидацию.

Вот что пишут о display: block;

Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести себя подобно блокам — происходит перенос строк в начале и в конце содержимого.

Описанное выше "нехорошее" поведение браузеров будет только при указании спецификации

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ну или там

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

а для

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

оба варианта кода нормально выглядит во всех браузерах.

Если сделать документ совсем без спецификации, то есть, начать прямо с тега <html>, как чаще всего и поступают, ситуация немного изменится - то есть, IE 7 и 8 покажут правильно только второй вариант кода, с добавленным стилевым определением display: block;, а последние версии Opera и Mozilla Firefox нормально покажут оба варианта кода.

Вывод - спецификация HTML - это не "просто строчка". Либо пишите её осознанно, либо не пишите вовсе, но тогда будьте готовы к необходимости всяких "хитрых решений", которые могли бы обеспечить кроссбраузерную совместимость.

 на сайт


теги: браузеры firefox ошибка ie html css вебдезигн opera

показать комментарии (1)

14.04.2010, 21:53; рейтинг: 12790

  свежие записипоиск по блогукомментариистатистикао "вирусах" в архивах .zip

Наверх Яндекс.Метрика
© PerS
вход