2010-06-01 3 views
8

может кто-то пожалуйста, объясните мне, почему наличие доктайп изhtml doctype добавляет пробелы?

<!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> 

с помощью «Переходный», нет белого пространства под изображением, используя «Строгий» есть!

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

+0

В вашем файле есть какие-либо скрытые отпечатки? (Как пробелы в конце строки?) – John

+0

нет скрытых пробелов. – pstanton

ответ

14

Как вы можете видеть в this table, первый режим Doctype triggers во всех браузерах, second будет запускать стандартный режим.

Остальная часть этой истории продолжается в Images, Tables, and Mysterious Gaps:

Setting images to be blocks

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

td img {display: block;} 
+0

Я только что нашел эту статью. +1 для ускорения. :) – edl

+0

так что решение должно добавить 'display: block;' на изображение .. изменить ответ, и я дам тик! – pstanton

1

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

Попробуйте разбить табличную разметку на одну длинную линию.

+0

нет, я тестировал это без пробелов.это похоже на то, что рендеринг добавляет пробелы при использовании строгого doctype. – pstanton

0

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

0

Первый DOCTYPE сделают вашу страницу в almost standards mode:

режима

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

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