Границы, не показанные в Firefox с граничным коллапсом на таблице, позиция: относительная по tbody или фоновый цвет на ячейке

Рассмотрим следующий HTML:

   TABLE.data TD.priceCell { background-color: #EEE; text-align: center; color: #000; } div.datagrid table { border-collapse: collapse; } div.datagrid table tbody { position: relative; }    
Product Price Discount
Keyboard 20 2

Обратите внимание, что последняя ячейка имеет левую и правую границу в своем встроенном стиле. Вы (или, по крайней мере, я) ожидали бы, что это будет видно. В IE это так. Но в Firefox (6) это не так. Вы можете решить эту проблему:

  • Удаление позиции относительно div.datagrid table tbody в CSS
  • Изменение div.datagrid table tbody div.datagrid table в div.datagrid table в CSS
  • Удаление background-color на table.data td.priceCell в CSS
  • Удаление border-collapse div.datagrid table в CSS

Это упрощенная версия нашего кода; мы также решили его (выбрав вариант 2). Но мне интересно, так это:

  • Это ошибка в Firefox?
  • Это ошибка в IE?

И особенно: по какой причине Firefox не будет показывать границы, когда CSS такой, какой он есть?

Это выглядит как ошибка Firefox для меня. Фоны рисуются над границами; вы можете увидеть это, если вы используете полупрозрачный цвет фона.

Я подал https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Просто столкнулся с этой проблемой и пришел к решению только css: просто добавьте background-clip: padding-box в ваш td элемент.

См. Эту статью для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Просто положить все в одном месте.

Проблема возникает, когда у вас есть ячейка с позицией относительно таблицы с обрушенными границами (как указал Борис и заполнил ошибку https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

Это можно легко решить с помощью CSS, как указано user2342963 (добавление фонового зажима: padding-box в ячейку).

Вы можете увидеть проблему (с Firefox) и исправить здесь: http://jsfiddle.net/ramiro_conductiva/XgeAS/

 table {border-spacing: 0px;} td {border: 1px solid blue; background-color: yellow; padding: 5px;} td.cellRelative {position: relative;} td.cellRelativeFix {background-clip: padding-box;} table.tableSeparate {border-collapse: separate;} table.tableCollapse {border-collapse: collapse;} 
position: relative position: static
position: relative position: static
position: relative position: static

Это ошибка в firefox, и, надеюсь, они исправят ее в ближайшее время. Но в то же время я смог исправить эту проблему для меня, установив ячейки td в position: static . Надеюсь, это поможет кому-то другому.

 td { position: static; } 

Еще одно возможное решение – исправить ошибки colspan в разметке таблиц.

По-видимому, ошибки colspan могут вызывать те же эффекты со скрытыми границами при использовании border-collapse: collapse;

Я был направлен в правильное решение через http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

В моей таблице я написал

, когда было всего 8 столбцов.

Это вызвало ошибку (скрытая правая граница) в

  • Chrome 51.0.2704.103 м (64-разрядная версия)
  • Vivaldi 1.2.490.43 () (32-разрядный)

но с правыми границами в

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Edge 25.10586.0.0
  • Синхронизация файлов cookie между браузерами
  • Отключить панель сообщений с просьбой разрешить скрытый плагин
  • Изменение цвета по умолчанию Firefox при открытии ссылок на новой вкладке
  • Настройка ярлыков меню в Firefox
  • Как я могу заставить FireFox автоматически заполнить всю форму?
  • Как заблокировать все элементы / контент Facebook
  • Как отслеживать перенаправления URL-адресов в браузере?
  • Программное обеспечение для экспорта дополнений Firefox
  • Неподдерживаемый аддон Firefox
  • Изменение шрифтов адресных баров и поисковых систем в Firefox3.6?
  • Пользовательский Cursor Image CSS
  • Давайте будем гением компьютера.