1

how I see it, scaled by image editor

I have encountered a problem with table headers in firefox, which appeard to me when viewing on monitors with big resolution (i.e. 1920x1080); the table header is shifted by 1 pixel.

I am trying to achieve the following: Internal borders - 1 pixel, external - 2px, header should have a different color.

I've removed some redundant code, but was left with 2 div blocks due necessity. The problem disappeared in other browsers, in other resolutions, when I resize browser window. But it reproduces on anther computer (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>
4

2 回答 2

2

你被臭名昭著的边框折叠错误（它也会影响 webkit 浏览器，但行为不同；背景转移到另一边）咬住了。当舍入 ½ 像素时，此错误与浏览器中的不同实现有关。

本·布坎南 ( Ben Buchanan )在 Opera 的 Web 标准课程中写到了这一点，该课程后来被捐赠给了W3C 网络教育社区团体。

为了完整起见，这里是文章的摘录：

......那么解决方案是什么？如果你想使用 1px 边框和标题背景，除了“忍受它”之外真的没有解决办法。这是一个非常小的差异，也是一个非致命问题——也就是说，该表仍然完全可用。因此，许多人选择只忍受浏览器之间的差异。让网络成为网络。如果你愿意使用更大的边框，比如 2px，那么你可以简单地在表格、单元格和标题上设置一个 1px 的边框；然后将表格设置为分隔边框并在它们之间应用零间距：

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

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

至少在 Firefox 中，1px 边框将加起来为所需的 2px 渲染边框，避免了途中的舍入问题。Safari仍然存在差距。或者，您可以通过不在标题上使用边框或背景颜色来隐藏问题。问题仍然存在；你只是不会看到它。这可能是最简单和最有效的解决方案。

TL;DR - 给我密码！

那么，你有几个选择来解决这个泡菜：

  • 失去边界，你就没有问题。（演示）
  • 忍受它，如果你必须在标题上有一个背景和一个 1 像素的边框。
  • 通过将 1 像素边框应用于单元格、标题和标题，使用更宽的边框separate（例如 2 像素），将边框间距设置为 0 并将边框折叠为. （演示）
  • 不要在标题（或标题）上使用背景/边框颜色，从而有效地隐藏问题。（演示）
于 2013-07-31T10:36:22.300 回答
1

@Eliran Malka 是对的，但也许你也可以做一些解决方法。

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

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

编辑：

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

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

于 2013-07-31T10:33:18.717 回答