Ошибка Firefox в 1 пиксель со схлопыванием границ, обходной путь?
https://stackoverflow.com/questions/1035706
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли обходной путь для следующей ошибки «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>
Это выглядит так:
Есть ли какое-нибудь чистое решение CSS?
Редактировать
Я немного не понял свою таблицу, поэтому вот она еще раз:
С коллапсом границ:
С cellpacing="0" и без схлопывания границ, как было предложено:
Итак, теперь границы внутри моей таблицы такие: удвоился, но мне нужна граница в 1 пиксель по всей моей таблице.
Когда я удаляю границу в 1 пиксель из таблицы, я заканчиваю:
Границы внутри моего стола все еще удвоены.
Я мог бы установить только правую и нижнюю границу для каждого TD, TH и левую границу для каждого первого ребенка в TR, чтобы добиться того, чего я хочу, но я думаю, что есть более простой способ?
Решение
Удалите border-collapse и используйте вместо него cellspacing = 0.
<table style="border: 15px solid green; width: 100%" cellspacing="0">
Это происходит потому, что когда вы устанавливаете border-collapse: collapse, Firefox 2.0 помещает границу снаружи tr. Другие браузеры помещают это внутрь.
Установите ширину границы в своем коде на 10 пикселей, чтобы увидеть, что на самом деле происходит.
<Ч>редактировать после редактирования OP
Вы можете использовать старую таблицу " border " трюк. Установите цвет фона на столе. Установите цвет 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>
Другие советы
Для тех, кто предпочитает держать презентацию вне разметки или не имеет доступа к разметке, здесь чисто 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.
Эта проблема больше не существует. В 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 необходим, иначе эти линии не будут соединяться.
table {border-spacing: 0; коллапс границы: коллапс; } / * работает в FF 3.5 * /
Лучшее решение только для CSS:
Добавлять
td {
background-clip: padding-box
}
Больше информации: https://developer.mozilla.org/en-US/docs/CSS/background-clip
Спасибо @medoingthings
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;
}
}
Я не думаю, что когда-либо слышал о "1px к левой ошибке", quot; Вы должны загрузить свой код куда-нибудь, чтобы мы могли проверить его и убедиться, что это не «Я что-то пропустил где-то» bug :) Я бы также посоветовал пробежаться по вашей разметке с помощью Firebug, чтобы определить, не происходит ли что-нибудь еще.
Я столкнулся с этой проблемой - но в моем случае это было связано с тем, что таблица была вложена в элемент div, для которого задано переполнение: скрыто. Я удалил это, и это сработало.
Наткнулся на эту проблему и как обойти. Я использовал:
table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}
в основном обманывал границу, используя цвет фона. Что, таким образом, предотвратило двойные внутренние границы.
Мое решение заключается в следующем.
<Ол> border-collapse , 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.
Я был укушен этим сегодня. Предложенные обходные пути не помогли мне, поэтому я нашел свой:
table { border: 1px solid transparent; border-collapse: collapse; }
Таким образом, вы получаете свернутые границы, без двойных границ и все в пределах границ, которые вы хотите, без правил, специфичных для браузера. Недостатков нет.
Я также столкнулся с этой проблемой, полное решение для доказательства очень просто в вашем asp: gridview просто добавьте
GridLines="None"
и строки исчезают в Firefox, никакой модификации CSS не требуется.
