CSS: Chrome и Safari, похоже, "добавляют" границу к ширине, в то время как IE, Firefox и Opera не

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

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

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

Какая проблема?

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

(наиболее) соответствующие 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 должны быть как минимум на 2px более узкими, чем table.uitbetaling, чтобы правая граница была видна в Firefox.

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

Ответ 1

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

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

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

Существует также поле для заполнения, которое я не использую, как правило, выше двух.

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

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

Ответ 2

Try:

table{border-collapse:collapse;}

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

Прочтите это:

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

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

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

Удачи!

Ответ 7

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