只有底部邊框的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寬

回答

相關問題