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

我的问题很容易解释，但Webkit很难解决。请在下面写着：只有底部边框的Webkit（Safari和Chrome）零宽度td显示为1px宽

我有一个简单的表单行和两个细胞，但仍显示不同Safari /铬表比IE/Firefox的。

表格的单行中的第一个单元格包含一个宽度为150px并具有1px蓝色边框的div。在同一行中的第二个单元格有一个红色只底部边界25px宽，并包含一个div是0px宽并且没有边框。

参见例如在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修改是不可能的。请尝试帮我找到（Webkit）CSS解决方案以解决上述问题。

来源

2011-04-22 thaBongo

这肯定是在WebKit的一个bug，好像已经知道：https://bugs.webkit.org/show_bug.cgi?id=39381

使用显示：无该小区。

来源

2011-04-23 00:32:22

非常感谢您的回答。它确实看起来像是同样的错误。不幸的是我不能使用display：none，因为这个设计是一个更大的东西的简化。现在看来我需要恢复到JavaScript解决方案，这是我们想要省略的。再次感谢！：） – thaBongo 2011-05-03 08:40:36

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

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

来源

2011-08-18 10:20:23

谢谢，这确实解决了这里定义的问题。然而，这种解决方案并不适用于上述问题的原因（http://stackoverflow.com/questions/5660955/100-width-td-in-webkit-browsers-always-at-least-1-pixel-宽） – thaBongo 2011-12-16 13:03:54

3年后，它看起来像这样的错误仍然是不固定的铬36的

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

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

来源

2014-08-19 02:32:26 DoctorDestructo

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

回答

相关问题