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

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

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

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

Что, кажется, проблема?

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

Самые соответствующие строки 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.uitbetaling и table.uitbetaling img, table.uitbetaling td к тому же значению (например, оба 496 или 498), "проблема" в Chrome и Safari решена, однако в Firefox, который граница правой стороны, чем пробел. Поскольку граница правой стороны не может "подойти" к больше. img и td должно быть по крайней мере на 2 пкс более узким, чем table.uitbetaling для правильной границы быть видимым в Firefox.

Там какой-либо путь состоит в том, чтобы решить это?

10
задан Michael Currie 11 September 2015 в 18:13
поделиться