Это будет краткий обзор моего исследования на тему DOCTYPE (подробнее о DOCTYPE я напишу как нибудь позднее) и поведения <IMG> элементов. Итак, если вы еще не знаете, а являетесь вебдизайнером или верстальщиком HTML страниц, вам надо знать, что лучше указывать тип документа для HTML диррективой DTD в начале любого HTML документа: <!DOCTYPE …>. Потому как иначе, ваша страница может выглядеть и работать не так, как вам хочется (например, без этого определения не работает CSS «position: fixed»). Я долго мучался с этим DOCTYPE, чтобы все работало так, как хотелось бы, и пришел к выводу, что лучше делать именно такое объявление типа:
<!DOCTYPE HTML>
ставиться в самом начале HTML документа, а в CSS стиль добавляется следующая директива:
img {display: block}
Краткое пояснение: первой строкой вы говорите броузеру использовать тип документа HTML без указания явного типа модели strict/quirk (лучше не указывать явно, так как вы не старайтесь, все равно очень сложно создать строго валидный HTML, зато такое простое определение включает большинство броузеров в Strict mode — взято с Google страниц), а второй директивой CSS вы устраняете одну из проблем strict режима — в нем все <img> елементы имеют inline тип, а не block. Из-за отсутствия такой директивы, ваш дизайн может «расползаться», если имеются <img> элементы внутри <td>. Дело в том, что как привыкли вебдизайнеры старой школы, если вставить в <td> только <img>, картинка должна заполнить всю ячейку таблицы край в край. Все это работало, потому что для броузера IMG являлся блоком, а CSS утверждает, что если в блоке (TD) встречается блочный элемент (IMG), то содержимое блока становится блочным и работает по правилам блока — «край в край». Такое же поведение выставляется в Quirk и Almost Strict режимах. В Strict модели IMG является inline типом, поэтому по CSS получается, что в блоке (TD) идет только inline (IMG), значит содержимое ячейки будет работать как inline модель для содержимого <TD> — броузер «выделит» пространство для текста, как он делает для inline содержимого. Именно это «пространство» в виде отступа снизу после картинки и «разваливает» дизайн страниц. И многие верстальщики могут долго искать причину, почему так происходит.
Вообще, я много интересного у знал о моделях Strict/Quirk броузеров. Как обобщю все инфу, выложу ее здесь.
Вэри охренительское спасибо!
Ждём статью про доктайпы.