为什么我的表格单元格中只有一条细的垂直线条？

问题描述：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     table 
     { 
      border-collapse: collapse;    
     } 
     td 
     { 
      background-color: gray;    
     } 
     td.first 
     { 
      -webkit-border-bottom-left-radius: 10px; 
      -moz-border-radius-bottomleft: 10px; 
      border-bottom-left-radius: 10px; 
      width: 100px;    
     } 
     td.second 
     { 
      -webkit-border-bottom-right-radius: 10px; 
      -moz-border-radius-bottomright: 10px; 
      border-bottom-right-radius: 10px;    
      width: 100px; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tbody> 
      <tr>      
       <td>Column 1</td> 
       <td>Column 2</td>      
       <td>Column 3</td>      
       <td>Column 4</td>      
      </tr>   
      <tr>      
       <td class="first"></td> 
       <td class="second" colspan="3">Column 2</td>       
      </tr> 
     </tbody> 
    </table> 
</body>

这仅发生在IE9。如果我添加一些填充，请删除td.second中的边框半径，或者添加一个单元格并更改该colspan，它会消失（对于此示例而言）。我有另一个项目，做同样的事情是不可行的，或者只是不行。

是什么导致这种情况发生，是否有一些神奇的CSS我可以使用它可以修复它的IE9，而不是打破和其他浏览器？

和我在这里一样，我想：http://stackoverflow.com/questions/7458393/most-sophisticated-css-rendering-bug-of-all-time-ie9。在这个问题上，它看起来像一个IE9的错误。 – thirtydot

在jsFiddle中运行你的代码，我没有看到它：http://jsfiddle.net/PytgZ/但我看到它，如果我从我的本地机器运行它。奇。 – invertedSpear

答

玩了一下，我不得不确认thirtydot的结论，这是一个显示错误。如果您将colspan取出或将第二行更改为：

<tr>      
    <td class="first">X</td> 
    <td colspan="2">Column 2</td> 
    <td class="second">&nbsp;</td>       
</tr>

然后不再行。可能与拐角半径无法正确渲染有关，因为它是IE的一项新功能。

我放弃了。不幸的是，这看起来像一个渲染错误。感谢您的帮助invertedSpear。 – kailoon

为什么我的表格单元格中只有一条细的垂直线条？

相关推荐