Разный внешний вид между Firefox и Chrome стиля границы

Question

Коды, как показано ниже. Я так озадачен этой проблемой.

table td{ 
    padding:10px; 
    background:#415DA1; 
    border-top:solid 10px #F00; 
    border-right:solid 10px #CCC; 
    border-bottom:solid 10px #F00; 
    border-left:solid 10px #CCC; 
} 

<table> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
</table> 

Apperance между Firefox и Chrome имеет некоторые отличия, я не уверен, если это coused различиями разных brwosers. Есть ли способ исправить это с помощью CSS?

Пример: http://jsfiddle.net/AndyE/B2fjn/

Answer 1

Это просто отличительные черты реализации чертежей. Вы заметите, что есть разница в IE и Opera тоже:

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

Единственный способ, которым я могу думать, чтобы получить последовательную границу во всех браузерах, чтобы установить border-collapse в separate на <table> элемент:

table { 
    border-collapse: separate; 
} 

Это, к сожалению, означает, что у вас есть новая проблема для решения — теперь будет 2x10px границы между каждой ячейкой. Вы можете обойти это, изменив разметку или добавив дополнительные правила CSS. Например, я изменил CSS к следующему:

table { 
    border-collapse: separate; 
} 

table td{ 
    padding:10px; 
    background:#415DA1; 
    border-top:solid 10px #F00; 
    border-right:solid 5px #CCC; 
    border-bottom:solid 10px #F00; 
    border-left:solid 5px #CCC; 
} 

table td:first-child { 
    border-left-width: 10px; 
} 
table td:last-child { 
    border-right-width: 10px; 
} 

Демо: http://jsfiddle.net/AndyE/B2fjn/1/

Это дает такой же хороший результат, как вы можете, вероятно, ожидать в современных браузерах, но не выглядят так здорово в IE 6-8. Вам нужно поэкспериментировать, пока не получите лучший результат.

Answer 2

правильный синтаксис для границы (CSS) является: border: 1px solid #FFF;. Теперь измените CSS, как это:

table tr td{ 
    padding:10px; 
    background:#415DA1; 
    border-top:10px solid #F00; 
    border-right:10px solid #CCC; 
    border-bottom:10px solid #F00; 
    border-left:10px solid #CCC; 
} 

Некоторые браузеры имеют возможность корректировать код CSS, если есть какие-либо проблемы (как у вас), но некоторые этого не делают. Итак, проверьте, работает ли новый код CSS или нет. Если это не так, отправьте скриншоты обоих браузеров, отображающих документ. Спасибо.