爲什麼我的表格單元格中只有一條細的垂直線條？

這裏是我的測試代碼：爲什麼我的表格單元格中只有一條細的垂直線條？

<!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，而不是打破和其他瀏覽器？

來源

2011-09-22 kailoon

和我在這裏一樣，我想：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的一項新功能。

來源

2011-09-23 00:00:57 invertedSpear

我放棄了。不幸的是，這看起來像一個渲染錯誤。感謝您的幫助invertedSpear。 – kailoon

爲什麼我的表格單元格中只有一條細的垂直線條？

回答

相關問題