为什么Firefox在一些HTML表上缺少边框

I am using Firefox 3.5.7 and I have the same CSS used in multiple HTML tables, but there are some examples where parts of the borders are not shown.

我正在使用Firefox 3.5.7，并且在多个HTML表中使用了相同的CSS，但是有一些示例没有显示部分边框。

What makes no sense to me is that the same CSS on the same page for another HTML table works fine. Also, the same page in Internet Explorer looks fine from a border point of view.

对我来说没有任何意义的是，相同页面上的相同CSS对于另一个HTML表来说工作得很好。同样，从边界的角度来看，Internet Explorer中的相同页面看起来也不错。

Here is an image with an example, as you can see in this case the bottom of the first table is missing a border.

这是一个带有示例的图像，正如您在本例中看到的，第一个表的底部缺少边框。

Does anyone have a clue why this would happen here?

有人知道为什么会发生这种事吗?

8 个解决方案

#1

Maybe you've zoomed in/out a bit. This can happen either accidently or knowingly when you do Ctrl+Scrollwheel. Maybe it isn't completely resetted to zoom level zero. This mis-rendering behaviour is then recognizeable at some websites, also here at SO.

也许你放大了一点。这可能是偶然发生的，也可能是您在使用Ctrl+Scrollwheel时故意发生的。也许它并没有完全被调整到0级。这种错误渲染行为在一些网站上是可以识别的，在这里也是如此。

To fix this, just hit Ctrl+0 or do View > Zoom > Reset to reset the zoom level to default.

要解决这个问题，只需按Ctrl+0或do View > Zoom >重置缩放等级为默认。

This is Firefox/Gecko bug 410959. This affects tables with border-collapse:collapse. It's from 2008 and there's no real progress on it, so you'll probably need to find a workaround. One way is using border-collapse:separate and fiddling with borders on a per-cell basis.

这是Firefox/Gecko的bug 410959。这会影响到边界崩溃的表:崩溃。这是从2008年开始的，并且没有真正的进展，所以你可能需要找到一个变通方法。一种方法是使用边界-折叠:按单元对边界进行分离和修改。

#2

I found a similar problem when zoomed out in Firefox on an application I am working on.

当我在我正在开发的一个应用程序中放大Firefox时，我发现了一个类似的问题。

The main cause was having the CSS border-collapse property set to collapse.

主要原因是CSS边框-折叠属性设置为折叠。

Changing it to separate instead fixed the problem. However, that meant I did have to rethink the way borders are applied to various parts of the table, because otherwise your borders will appear to double in thickness. I ended up having to use jQuery to give a special "last" class to the last td or th in each tr, and to the last tr in the table. My query was something like:

把它改成分开来解决问题。然而，这意味着我必须重新考虑如何将边框应用到表的各个部分，因为否则，您的边框的厚度将增加一倍。最后，我不得不使用jQuery为每个tr中的最后一个td或th以及表中的最后一个tr提供一个特殊的“最后”类。我的问题是:

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');

My CSS rules were similar that:

我的CSS规则是相似的:

table
{
    border-collapse: separate !important;
}

table tr, table th, table td
{
    border-right-width: 0;
    border-bottom-width: 0;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

table td.last, table th.last 
{
    border-right: 1px solid black;
}

table tr.last td
{
    border-bottom: 1px solid black;
}

table
{
    border: 0;
}

I did end up using browser targeting so that I only applied these rules to Firefox users, but it may work for all browsers, I haven't tested.

我最后确实使用了浏览器定位，所以我只对Firefox用户应用了这些规则，但它可能适用于所有浏览器，我还没有测试过。

#3

Building on the good answer of @GregL (I seem unable to "comment" directly on it): Instead of using JQuery to generate a "last" class, I simply used the built-in pseudo-element selector :first-child. I built rules selecting tr:first-child and td:first-child that define border-top and border-left (instead of border-right and border-bottom as in GregL's answer). The generic rules define border-right and border-bottom instead of border-left and border-top. :first-child is said to be supported in Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1, and Opera v. 9.6 (). Tested on Firefox v. 40.0.3, where I saw this problem in the first place.

基于@GregL的正确答案(我似乎无法直接对其进行“评论”):我没有使用JQuery生成“最后”类，而是使用内置的伪元素选择器:first-child。我构建了选择tr:first-child和td:first-child的规则，它们定义了border-top和border-left(而不是GregL的答案是border-right和border-bottom)。通用规则定义边界-右边界和边界-底，而不是边界-左边界和边界-顶边界。:第一个孩子在Chrome v. 4.0、Firefox v. 3.0、IE 7.0、Safari v. 3.1和Opera v. 9.6()中得到支持。在Firefox v. 40.0.3上测试过，在这里我首先看到了这个问题。

#4

This was caused by the table (with a missing bottom-border) to be inside a div...The border apparently didn't get calculated in the table height, so the border was there but wasn't shown.

这是由于表(缺少底部边框)位于div…边界显然没有在表格高度中计算出来，所以边界在那里但是没有显示出来。

Giving the surrounding div a margin-bottom from 1px solved the problem.

给周围的div以1px的下端的空白，解决了这个问题。

#5

I had the same problem with missing table border. My solution is:

我也有同样的问题。我的解决方案是:

table{
  border-collapse: collapse !important;
  border-spacing: 0px;
  border: 1px solid #DDD;
}

And border for table rows:

和表格行的边框:

table tr{
  border-bottom: 1px solid #DDD !important;
}

I am using Bootstrap either in my layout and the table has also bootstrap css classes like "table table-striped table-bordered"

我在我的布局中使用了Bootstrap表格中也有引导css类，比如"表格条形表格边框"

This solution works for me, when I tried solution with

当我尝试解的时候，这个解对我有效

border-collapse: separate !important;

it didn't work properly for me.

这对我来说不太合适。

#6

Just use border-spacing:0; hope this will solve your problem.

只使用border-spacing:0;希望这能解决你的问题。

#7

Border started going missing when browser zoom was increased. I was able to solve it by doing the following. Tested in Chrome and Firefox.

当浏览器缩放增加时，边框开始消失。我可以通过下面的步骤来解决它。在Chrome和Firefox中测试过。

padding: 0.5px !important

#8

worked for me realisation of answer @Donald Payne

为我实现了对@Donald Payne的回答。

*( .table - bootstrap class )

*(.table - bootstrap类)

table.table {
    border-collapse: separate !important;
}

table.table tr,
table.table th,
table.table td {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid #DDD !important;
    border-top: 1px solid #DDD !important;
}

table.table td:last-child,
table.table th:last-child {
    border-right: 1px solid #DDD !important;
}

table.table tr:last-child td {
    border-bottom: 1px solid #DDD !important;
}

table.table {
    border: 0 !important;
}

table.table thead tr:last-child th,
table.table thead tr:last-child td {
  border-bottom: 1px solid #DDD !important;
}

table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
  border-top-width: 0 !important;
}

#1