Двойная рамка CSS3 - FF! Chrome

Question

Мне интересно, почему эта двойная рамка на таблице TDs не будет отображаться в Chrome, а только в FF?Есть идеи, что может быть обходной?Спасибо!

http://jsfiddle.net/yQQLk/1/

Answer 1

Не уверен, почему вы используете box-shadow для создания двойной границы, когда само свойство border уже поддерживает двойную границу самостоятельно. Просто используйте следующий CSS вместо того, что у вас есть:

td {
    border-bottom: 3px double red;
}

Обратите внимание, что вам нужно увеличить размер границы до 3px, чтобы обе строки отображались (при 1px иногда это вообще не отображается, когда вы указываете double).

Другое преимущество состоит в том, что это будет работать во всех браузерах, включая старые, которые не поддерживают box-shadow.

Answer 2

Увеличьте толщину границы, чтобы увидеть очевидную демонстрацию различий в рендеринге между двумя браузерами.Похоже, что в FF поле-тень накладывается поверх границы, в Chrome оно скрывается снизу.

Вы можете использовать другой подход - возможно, использование границы снизу в сочетании с украшением текста: подчеркивание.

Answer 3

Попробуйте, это работает в обоих браузерах:

td {
     -moz-box-shadow: 0 1px  0 #000;
 -webkit-box-shadow: 0 1px  0 #000;
        border-bottom: 1px solid red;
         box-shadow: 0 2px  0 #000;

}

Я думаю, это проблема: box-shadow: 0 1px 0 #000;