Границы не отображаются в Firefox с коллапсом границ на столе, положением: относительно тела или цветом фона в ячейке - PullRequest
Новая
       21

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

70 голосов
/ 22 сентября 2011

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

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

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

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

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

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

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

Ответы [ 5 ]

151 голосов
/ 02 мая 2013

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

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

58 голосов
/ 22 сентября 2011

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

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

12 голосов
/ 27 сентября 2013

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

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

Это может быть легко решено с помощью CSS, как указано в user2342963 (Добавление background-clip: 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;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
8 голосов
/ 15 сентября 2013

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

td {
    position: static;
}
2 голосов
/ 13 июля 2016

Другое возможное решение - исправить ошибки 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)
  • Край 25.10586.0.0
...