Webkit（Safari 和 Chrome）零宽度 td 只有底部边框显示为 1px 宽答案

【问题标题】：Webkit (Safari and Chrome) zero width td with only bottom border is displayed as 1px wideWebkit（Safari 和 Chrome）零宽度 td 只有底部边框显示为 1px 宽
【发布时间】：2011-08-11 07:04:07
【问题描述】：

我的问题很容易解释，但 Webkit 很难解决。请阅读以下内容：

我有一个具有单行和两个单元格的简单表格，但表格的显示仍然在 Safari/Chrome 中与在 IE/Firefox 中不同。

表格单行中的第一个单元格包含一个 150 像素宽、1 像素蓝色边框的 div。同一行中的第二个单元格有一个红色的仅底部 25px 宽的边框，并且包含一个0px 宽 且没有边框的div。

查看http://www.livenetlife.com/Tabletest.html的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div style="border: 1px solid blue; width:150px; height:50px;"></div>
                </td>
                <td style="border-left: 0px; border-right:0px; border-top:0px; border-bottom: 25px solid red;">
                    <div style="width:0px; height:0px;"></div>
                </td>
            </tr>
        </table>

    </body>
</html>

在 Firefox 和 IE 中，第二个单元格不显示，因为它是 0 像素宽。通过使用 Firefox 或 IE 打开上面的链接进行测试，您会注意到一个蓝色矩形（第一个单元格中的 div）。

但在 Webkit 浏览器（Safari 和 Chrome）中，第二个单元格也会显示，因为它神秘地 1 像素宽。用 Safari 或 Chrome 打开上面的链接，你会注意蓝色矩形旁边显示的垂直红线（第二个单元格的 25 像素宽的底部边框）。

为了使第二个单元格在 Safari 和 Chrome 中也消失，我缺少什么 Webkit CSS？

任何建议都将不胜感激。

PS：请注意，上面的表格实际上是对here 描述的实际问题的简化。因此 HTML 修改是不可能的。请尝试帮我找到解决上述问题的（Webkit）CSS 解决方案。

【问题讨论】：

标签： css webkit html-table width

【解决方案1】：

这绝对是 WebKit 中的一个错误，似乎已经知道：https://bugs.webkit.org/show_bug.cgi?id=39381

对该单元格使用 display:none。

【讨论】：

非常感谢您的回答。它确实看起来像同一个错误是的。不幸的是，我不能使用 display:none，因为这个设计是对更大的东西的简化。现在看来我需要恢复到 javascript 解决方案，这是我们想要省略的。再次感谢！ :)

【解决方案2】：

您可以在表格的第二个 td 中使用 display:inline;。这是您的代码以及我的更改。

<table cellpadding="0" cellspacing="0">
        <tbody><tr>
            <td>
                <div style="border: 1px solid blue; width:150px; height:50px;"></div>
            </td>
            <td style="border-left: 0px; border-right:0px; border-top:0px; border-bottom: 25px solid red; display: inline;">
                <div style="width:0px; height:0px;"></div>
            </td>
        </tr>
    </tbody></table>

【讨论】：

谢谢，这绝对解决了这里定义的问题。然而，这个解决方案对于上面提到的这个问题的根源并不好（stackoverflow.com/questions/5660955/…）

【解决方案3】：

3 年多后，从 Chrome 36 开始，这个错误似乎仍未修复。

在这个特定示例中解决问题的一种方法是为第一个单元格中的 div 添加 -1px 右边距和相对定位，如下所示：

<table cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <div style="position: relative; margin-right: -1px; border: 1px solid blue; width: 150px; height: 50px;"></div>
    </td>
    <td style="border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 25px solid red;">
      <div style="width: 0px; height: 0px;"></div>
    </td>
  </tr>
</table>

【讨论】：