Question

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

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

表格单行中的第一个单元格包含一个150px宽且具有1px蓝色边框的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）中，第二个单元格也显示，因为它神秘地1px宽。用Safari或Chrome打开上面的链接你将会注意蓝色矩形旁边显示的垂直红线（第二个单元格的25px宽底边框）。

我错过了什么Webkit CSS才能使第二个单元格在Safari和Chrome中消失？

任何建议都会受到赞赏。

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

Answer 1

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

对该单元格使用display：none。

Answer 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>

Answer 3

3年多以后，从Chrome 36开始，这个bug似乎还没有解决。

在这个特定示例中解决问题的一种方法是在第一个单元格中为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>

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

3 个答案: