"Непонятный отступ" снизу картинки, находящейся в блоке или ячейке - проблема и её решение
Помогал знакомой сделать несложный макет сайта, вот и провозился битый час с описанной ниже фичей... итак, пишем простой файл 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
картинка 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 - это не "просто строчка". Либо пишите её осознанно, либо не пишите вовсе, но тогда будьте готовы к необходимости всяких "хитрых решений", которые могли бы обеспечить кроссбраузерную совместимость.
14.04.2010, 21:53 [14624 просмотра]