Ошибка Firefox 1 пиксель с обвалом границ, обходной путь?

Ответ 1

Удалите границу-сбой и вместо этого используйте cellspacing = 0.

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

Это происходит потому, что когда вы устанавливаете border-collapse: collapse, Firefox 2.0 помещает границу на внешнюю сторону tr. Другие браузеры помещают его внутри.

Установите ширину границ в 10 пикселей в коде, чтобы увидеть, что на самом деле происходит.

редактировать после редактирования OP

Вы можете использовать трюк старой границы таблицы. Установите цвет фона в таблице. Установите цвет td и th в белый. User cellspacing = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>

Ответ 2

Для тех, кто предпочитает оставлять презентацию вне разметки или у кого нет доступа к разметке, это чисто CSS-решение. Просто столкнулся с этой проблемой и протестировал это решение в FF3.5, IE6, IE7, IE8, Safari 4, Opera 10 и Google Chrome.

table { border-spacing: 0; *border-collapse: collapse; } 

Это устанавливает таблицу для использования пограничного интервала во всех браузерах (включая виновника, Firefox). Затем он использует взломанную звездочку CSS для представления правила ограничения границ только для IE, который неправильно применяет пограничный интервал (вы также можете включить отдельную таблицу стилей для IE с условными комментариями, если вам не нравятся хаки).

Если вы предпочитаете использовать межсетевой интервал, обязательно используйте его. Это просто предлагается в качестве альтернативного метода с использованием CSS.

Ответ 3

Этот вопрос больше не существует. В Firefox 47.0.1 следующий CSS не обнаруживает проблему с одним пикселем:

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

Мы также можем получить чистые однопиксельные границы для работы, не полагаясь на рабочую реализацию border-collapse, например:

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

Вы видите, что он делает? Хитрость заключается в том, что мы помещаем только верхнюю и левую границу в ячейки:

 +------+------
 | cell | cell
 +------+------
 | cell | cell

Это оставляет таблицу без правого и нижнего края: мы накладываем их на table

+------+-------               |         +-------+------+ 
| cell | cell                 |         | cell  | cell |
+------+-------   +           |    =    +-------+------+
| cell | cell                 |         | cell  | cell |
|      |             ---------+         +-------+------+

border-spacing: 0 существенно, иначе эти строки не будут подключаться.

Ответ 4

table {border-spacing: 0; пограничный крах: сбой; }/* работает в FF 3.5 */

Ответ 5

table { border-spacing: 0; *border-collapse: collapse; }

не работал у меня в FF 31. Так как у меня разные цвета для ячеек thead и tbody, фоновой цвет фона стола тоже не работал. Единственным решением было следующее:

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}

Ответ 6

Я не думаю, что когда-либо слышал о "1px к левой ошибке", вы должны загрузить свой код где-нибудь, чтобы мы могли проверить его и убедиться, что это не ошибка "Я что-то пропустил где-то":) я также предложит запустить вашу разметку с помощью Firebug, чтобы определить, есть ли что-то еще, что будет неудобно.

Ответ 7

Я столкнулся с этой проблемой, но в моем случае это имело отношение к тому, что таблица была вложена в набор div для переполнения: hidden. Я удалил это, и он сработал.

Ответ 8

Подходите к этой проблеме и как к работе. Я использовал:

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}

в основном обманул границу, используя цвет фона. Это, таким образом, предотвращало двойные внутренние границы.

Ответ 9

Мое решение выглядит следующим образом.

• Удалите , border и border-spacing из CSS.

• Добавьте этот код JavaScript:

  $('table tbody tr td').css('border-right', '1px solid #a25c17');
  $('table tbody tr td').css('border-bottom', '1px solid #a25c17');
  $('table tbody tr td:last-child').css('border-right', 'none');
  $('table').css('border-bottom', '1px solid #a25c17');
  

Честно говоря, я не знаю, почему это работает. Это волшебство jQuery.

Ответ 10

Лучшее решение только для CSS:

Добавить

td {
    background-clip: padding-box
}

Дополнительная информация: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Благодаря @medoingthings

Ответ 11

Я также столкнулся с этой проблемой, полное решение доказательств очень просто в вашем asp: gridview просто добавляет

GridLines="None" 

и строки исчезают в Firefox, не нуждаясь в модификации CSS.