html doctype добавляет пробел? - PullRequest
Новая
       36

html doctype добавляет пробел?

9 голосов
/ 02 июня 2010

Может кто-нибудь, пожалуйста, объясните мне, почему иметь тип документа

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

и

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

визуализировать следующий блок по-другому в Firefox? 

<table style="border-collapse:collapse; margin:0; padding:0;">
    <tr>
        <td style="border:1px solid red; margin:0; padding:0;"><img src="http://images.smh.com.au/2010/06/01/1533814/th_park-90x60.jpg" style="border:none; padding:0; margin:0;" /></td>
    </tr>
</table>

с использованием 'Transitional', под изображением нет пробелов, с использованием 'Strict' есть!

2-й вопрос, используя строгий, можно ли вообще удалить этот пробел?

Ответы [ 4 ]

14 голосов
/ 02 июня 2010

Как вы можете видеть в этой таблице , первый Doctype запускает режим quirks во всех браузерах, second запускает стандартный режим.

Продолжение этой истории продолжается на Изображения, таблицы и загадочные пробелы :

Установка изображений для блоков

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

td img {display: block;}
1 голос
/ 02 июня 2010

Я подозреваю, что пробелы в разметке (например, переводы строк и табуляции, которые делают код таблицы хорошо читаемым) ошибочны. Ранее я сталкивался с подобными проблемами, когда пробел в разметке приводил к раздражающему пробелу на экране, даже если казалось, что он не имеет значения (например, между <li> тегами).

Попробуйте свести разметку таблицы в одну длинную строку.

0 голосов
/ 25 августа 2010

Первый DOCTYPE отобразит вашу страницу в почти режиме стандартов :

Визуализация режима "Почти стандартов" соответствует режиму "стандартов" во всех деталяхкроме одного.Расположение изображений внутри ячеек таблицы обрабатывается так же, как и в режиме «причуд».

Второй DOCTYPE отобразит вашу страницу в стандартном режиме.

0 голосов
/ 02 июня 2010

Не уверен, почему место появляется. Что касается исправления, если вы не возражаете явно установить высоту для ячейки таблицы, вы можете добавить display: block; и высота: 60px; в твои тд стили.

...