Firefox 1 пиксель ошибка с бордюр-коллапс, обходной путь? - PullRequest
Новая
       22

Firefox 1 пиксель ошибка с бордюр-коллапс, обходной путь?

34 голосов
/ 24 июня 2009

Есть ли обходной путь для следующей ошибки «1 пиксель влево»? 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <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>
</body>
</html>

Это выглядит так:

Firefox CSS bug

Есть ли какое-нибудь чистое решение CSS для этого?

Редактировать

Мне было немного неясно насчет моего стола, так что вот снова:

С обвалом границы:

Firefox CSS bug

С cellspacing = "0" и без коллапса границы, как предложено:

Firefox CSS bug

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

Когда я удаляю 1px рамку из таблицы, я заканчиваю:

Firefox CSS bug

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

Я мог бы установить только правую и нижнюю границу для каждого TD, TH и левой границы для каждого первого ребенка в TR, чтобы достичь того, чего я хочу, но я думаю, что есть более простой способ?

Ответы [ 12 ]

22 голосов
/ 25 сентября 2009

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

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

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

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

18 голосов
/ 24 июня 2009

Удалите коллаж и используйте вместо него cellspacing = 0. 

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

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

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

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

Вы можете использовать старый трюк "границы" таблицы. Установите цвет фона на столе. Установите цвет td и th на белый. Ячейка пользователя = 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>
5 голосов
/ 05 июля 2016

Эта проблема больше не существует. В 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 необходим, иначе эти линии не будут соединяться.

2 голосов
/ 21 августа 2014 
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;
  }
}
2 голосов
/ 16 июля 2014

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

Добавить 

td {
    background-clip: padding-box
}

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

Благодаря @ medoingthings

2 голосов
/ 11 ноября 2009

таблица {интервал границы: 0; коллапс границы: коллапс; } / * работает в FF 3.5 * /

0 голосов
/ 30 июня 2018

Я был укушен этим сегодня. Предложенные обходные пути не помогли мне, поэтому я нашел свой: 

table { border: 1px solid transparent; border-collapse: collapse; }

Таким образом, вы получаете свернутые границы, без двойных границ и все, что вам нужно, без правил, специфичных для браузера. Недостатков нет.

0 голосов
/ 10 сентября 2012

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

  1. Удалить border-collapse, border и border-spacing из CSS.

  2. Добавить этот код 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.

0 голосов
/ 10 марта 2011

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

GridLines="None"

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

0 голосов
/ 12 августа 2010

Наткнулся на эту проблему и как обойти. Я использовал: 

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

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

Страница:
...