Различная внешность между Firefox и Chrome стиля Границы - PullRequest
Новая
       2

Различная внешность между Firefox и Chrome стиля Границы

3 голосов
/ 10 октября 2011

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

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>

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

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

Ответы [ 2 ]

4 голосов
/ 10 октября 2011

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

enter image description here

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

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

table {
    border-collapse: separate;
}

Это, к сожалению, означает, что вам нужно решить новую проблему & mdash; теперь между каждой ячейкой будут границы 2x 10px. Вы можете обойти это, изменив разметку или добавив дополнительные правила 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. Вам нужно будет экспериментировать, пока вы не получите наилучший возможный результат.

0 голосов
/ 10 октября 2011

правильный синтаксис для границы (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 или нет. Если это не так, пожалуйста, опубликуйте скриншоты обоих браузеров, отображающих документ. Спасибо.

...