Question

how I see it, scaled by image editor

我在firefox中遇到了表头问题，在大分辨率（即1920x1080）的显示器上观看时会出现问题。表头移动了1个像素。

我正在努力实现以下目标：内部边框 - 1个像素，外部 - 2个像素，标题应该有不同的颜色。

我删除了一些冗余代码，但由于必要而留下了2个div块。当我调整浏览器窗口大小时，问题在其他浏览器中消失了。但它在另一台计算机（Mac）上重现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <head>
        <style type="text/css">
            html, body {
                height: 100%;
            }
            table.border {
                border-collapse: collapse;
            }
            table.border td {
                background-color: #ffffff;
                border: 1px #CCCCCC solid;
            }
            table.border td:first-child {
                border-left-width: 2px;
            }
            table.border td:last-child {
                border-right-width: 2px;
            }
            table.border th {
                background-color: #767676;
                border: #CCCCCC solid;
                border-width: 0px 1px;
                color: #ffffff
            }
            table.border th:first-child {
                border-left: #767676 solid 2px;
            }
            table.border th:last-child {
                border-right: #767676 solid 2px;
            }
            table.border {
                border: #CCCCCC solid;
                border-width: 0px 0px 2px 0px;
            }
            #all {
                max-width: 1400px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
        <title></title>
    </head>

    <body>
        <div id="all">
            <table class="border">
                <tr>
                    <th>#</th>
                    <th>Name</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>test</td>
                </tr>
            </table>
        </div>
    </body>

</html>

Answer 1

你被臭名昭着的border-collapse bug咬了一下（影响了 webkit浏览器也是如此，但行为不同;背景转移到另一边）。当舍入1/2像素时，此错误与浏览器中的不同实现有关。

Ben Buchanan 撰写了关于此on Opera's Web Standards Curriculum的文章，后来捐赠给了W3C web education community group。

以下是文章的摘录，为了完整起见：

......那么解决方案是什么？如果要使用1px边框和标题   背景，除了“与它一起生活”之外，确实没有其他修复方法。它   是一个非常小的差异和一个非致命的问题 - 即表格   仍然完全可用。所以，很多人选择与之共存   浏览器之间的差异让Web成为Web。如果你快乐   使用更大的边框，比如2px，那么你可以简单地设置一个1px的边框   在桌子上，细胞和标题;然后将表设置为单独的边框和   在它们之间应用零间距：
table { 
  border-collapse: separate;
  border-spacing: 0; 
  border: 1px solid #000;
}

th, td, caption {
  border: 1px solid #000;
}
至少在Firefox中，1px边框将累加到所需的2px 渲染边框，避免在途中出现舍入问题。苹果浏览器仍留有差距。或者，您可以隐藏问题在标题上使用边框或背景颜色。问题是还在那儿;你只是不会看到它。这可能是最简单的最有效的解决方案。

TL; DR - gimme tha codez！

然后，你有几个选择来解决这个问题：

丢失边框，您没有任何问题。 ^(Demo)
与之共存，如果您必须在标题和1个像素边框上有背景。
使用更宽的边框（例如，2个像素），对单元格，标题和标题应用1个像素边框，将边框间距设置为0并按separate折叠边框。 ^(Demo)
不要在标题（或字幕）上使用背景/边框颜色，从而有效地隐藏问题。 ^(Demo)

Answer 2

@Eliran Malka有权利，但也许你也可以做一些解决方法。

在此示例中，table.border没有边框，但您可以在其后添加“有边框”div。如果您修改#all元素以隐藏不必要的.footer_border部分，则可以获得以下内容：

http://jsfiddle.net/Stocki/mBQS2/2/

修改

对于现代浏览器，可以使用::after选择器而不是div，因此HTML代码保持干净：

http://jsfiddle.net/Stocki/mBQS2/4/

在具有高分辨率的显示器上，表头在firefox中被不明显地移位

2 个答案:

TL; DR - gimme tha codez！