CSS: Chrome и Safari, кажется, «добавляют» границу ширины, в то время как IE, Firefox и Opera этого не делают

Question

Я пытаюсь добиться кросс-браузерной согласованности для моего сайта.

Речь идет об этой странице: http://www[insert -дот-тут] geld [insert-dash-here] surfen [insert-dot-here] nl / uitbetalingen.html (обратите внимание, что я предпочитаю URL, который нельзя сделать доступным для поисковых роботов)

Если вы просматриваете эту страницу в IE, Firefox или Opera, все в порядке, но в Chrome и Safari таблицы немного не совпадают (как вы наверняка заметите).

В чем проблема?

Мне кажется, что в Chrome и Safari левая и правая границы (всего 2 пикселя) добавляются к заданной ширине таблицы, в то время как в других браузерах эта граница считается частью ширины.

(Наиболее) релевантными CSS-строками являются следующие (из файла table.css, также доступного через исходный файл страницы):

table.uitbetaling {
 margin: 11px 18px 10px 19px;
 border: 1px solid #8ccaee;
 width: 498px;
 padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
 margin: 0;
 border: 0;
 padding: 0;
 width: 496px;
}
table.uitbetaling tr {
 margin: 0;
 border: 0;
 padding: 0 1px 0 0;
}

Итак, в основном я использовал структуру таблицы для организации изображений, например: (класс таблицы uitbetaling)

<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>

Если здесь я установлю ширину table.uitbetaling и table.uitbetaling img, table.uitbetaling td на одно и то же значение (например, 496 или 498), «проблема» в Chrome и Safari решена, однако в Firefox правая граница пустая. Потому что правая граница больше не может "вписаться". img и td должны быть как минимум на 2 пикселя уже, чем table.uitbetaling, чтобы правая граница была видна в Firefox.

Есть ли способ решить эту проблему?

Answer 1

В настоящее время вы должны использовать тип документа HTML5, если у вас есть проблемы с добавлением границ к ширине элемента, посмотрите стиль CSS: Размер коробки

border-box - включает ширину / высоту границы и ширину / высоту отступа или, в основном, указанную вами ширину, включает границы / заполнение

content-box - ширина, которую вы устанавливаете для элемента, является только областью содержимого, не включая отступы и границы

Есть также padding-box, который я не использую, обычно достаточно двух вышеперечисленных.

Теперь иногда мне кажется, что в IE8 используется другой формат, отличный от Chrome / FF и т. Д., Поэтому иногда у вас возникают проблемы. Вы всегда можете отладить и проверить, какой размер ящика установлен.

Примечание: если у вас нет DOCTYPE, то вы находитесь в режиме причуд, и IE отличается от WIRDLY от Chrome / FF на модели размера блока / коробки - и это ваша проблема прямо здесь

Answer 2

Рекомендуется всегда устанавливать table{border-collapse:collapse;} в css, а затем в любом случае использовать cell-padding="0" и cell-spacing="0" в html.

Answer 3

Вы объявили DTD (DOCTYPE)?

Читать это:

http://msdn.microsoft.com/en-us/library/bb250395.aspx

Похоже, что браузеры имеют разные способы отображения границ, но объявление DOCTYPE (которое идет вверху HTML-документа) вынуждает их соответствовать действующим стандартам, по крайней мере, в отношении модели css box.

Примечание: я всегда использую xhtml переходный DTD, чтобы сделать мой документ максимально совместимым ...

Удачи!

Answer 4

Я проверял в Opera 11, Google Chrome 7.0.517.44 и FireFox 3.6.12 не видел никакой разницы с дизайном вашего сайта.

Answer 5

Чтобы быть в безопасности, я обычно открываю стол следующим образом:

<table cellspacing="0" cellpadding="0">

Это "старый" HTML, но, по крайней мере, он вызывает согласованность в браузерах, и затем я применяю CSS по мере необходимости.

Answer 6

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

Answer 7

Попробуйте:

table{border-collapse:collapse;}