不同瀏覽器中的單元格背景/邊框不對齊

我開發了一個帶有CSS和圖形的漂亮表格框架。它使用3D背景的背景圖像切片和行的簡單css邊界。不同瀏覽器中的單元格背景/邊框不對齊

問題是我需要將邊框與標題對齊，並且它不會在不同的瀏覽器中始終如一地工作，儘管我看不出爲什麼。

在IE6和IE7它的工作原理確定

在IE8和FF3.5左邊緣出一個像素

在Chrome中10右邊緣出一個像素

似乎背景圖像沒有完全放置在標題單元格的邊緣，但很難知道哪個瀏覽器應該受到指責。任何建議感激。

問題的現場演示是： http://www.songtricks.com/TableBug.html

的HTML/CSS源代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 

    <head>  
    <style type="text/css"> 

    table.demo 
    { 
     margin:0px; 
     padding:0px; 
     border-collapse:collapse; 
    } 
    table.demo tr 
    { 
     padding:0px; 
     border:none 0px transparent; 
    } 

    table.demo th 
    { 
     border:none 0px transparent; 
     border-bottom:solid 1px #cccccc;  
     padding:10px; 
     background:url(wfx_table_tm.gif) repeat-x left top; 
    } 
    table.demo th.left 
    { 
     padding:0px; 
     background:url(wfx_table_tl.gif) no-repeat left top; 
    } 
    table.demo th.right 
    { 
     padding:0; 
     background:url(wfx_table_tr.gif) no-repeat right top; 
    } 

    table.demo td 
    { 
     border:none 0px transparent; 
     border-right:solid 1px #dfdfdf; 
     border-bottom:solid 1px #cccccc; 
     padding:8px; 
    } 
    table.demo td.left 
    { 
     border-left:solid 1px #b1b1b1; 
    } 
    table.demo td.right 
    { 
     border-right:solid 1px #b1b1b1; 
    } 

    </style>  
    </head> 

    <body> 
     <table class="demo"> 
      <tr> 
       <th class="left">Left</th> 
       <th>Center</th> 
       <th class="right">Right</th> 
      </tr><tr> 
       <td class="left">Left</td> 
       <td>Center</td>   
       <td class="right">Right</td> 
      </tr> 
     </table>  
    </body> 
</html>

來源

2011-04-19 Stephen

在table.demo級別嘗試border-spacing:0而不是border-collapse:collapse。

如果它打破ie6/7，那麼你可以在一個條件CSS引用中包含border-collapse。

來源

2011-04-19 22:55:49 musaul

穆薩爾，聳人聽聞的感謝！這就是訣竅，我之前並不知道邊界間距。多好的一招。我已經用下面的技術添加了ie6/7條件覆蓋，你認爲這是最好的方法嗎？再次感謝！/* IE6 hack */* html table.demo {border-collapse：collapse; }/* IE7 hack */*：first-child + html table.demo {border-collapse：collapse; } – Stephen 2011-04-20 00:52:32

我不擔心IE6和IE7黑客的「最好」。如果他們工作，然後將其稱爲完成，並繼續前往更有趣和有趣的事情。儘可能使CSS選擇器儘可能具體，以隔離這些雜物。 – 2011-04-20 01:27:01

我同意* mu *，因爲如果黑客對任何版本的IE都有效，那麼將其稱爲完成。除非您要使用瀏覽器特性無法分離的大塊CSS，您可以將它們放在單獨的文件中，並使用[if IE]註釋的部分包含它，如http：//www.gkspk .com/view/programming/minimum-and-maximum-widths-in-ie6 /（免責聲明：無障礙插件到我的網站。）：p – musaul 2011-04-20 12:25:30

你的問題是你正在使用背景圖像來模擬th.right的border-right。背景圖像內部邊界區域而<td>緊接着它有一個真正的邊界1px;瀏覽器使<th>和<td>具有相同的內部寬度以排列列，但<td>顯示1px更寬，因爲它具有1px的實際border-right。您的border-collapse: collapse正在隱藏其他單元格中的寬度問題。

解決方案是使用背景圖像作爲背景圖像和邊框。或者，使用背景圖像技巧在<td>元素上放置右側和左側邊框。

來源

2011-04-19 23:28:16

謝謝，你的理由很有趣，但它是如何解釋它只發生在一個側？或者Chrome/Firefox/IE的行爲與它有所不同？我試圖在1像素寬的圖像上使用td單元格上的背景圖像技巧，但遇到了更糟糕的兩個問題。（1）我有時需要將所有單元格與colspan合併在一起，並且您不能在單個單元格上同時顯示左/右背景圖像（2）在IE7中，使用td背景圖像隱藏了tr元素的背景顏色我正在使用交替陰影（我在上面的例子中沒有顯示）。 – Stephen 2011-04-20 00:16:32

border-collapse隱藏了問題的一面，爲''元素添加了一個「1px純色透明」邊框，您也會在右側看到問題。不同的瀏覽器總是呈現不同的東西：瀏覽器錯誤，標準中的歧義，標準的不同解釋等等。造型''風險最大，IE通常忽略''上的CSS並且通常''在版本和當然月亮的階段）。在''元素中嵌套'display：block'元素可以幫助解決您的「單元格」問題。 – 2011-04-20 00:31:49

我注意到，特別是IE7的行爲與風格嚴重。無論如何，感謝討論，我似乎已經開始運行我的問題，現在用border-spacing。 – Stephen 2011-04-20 01:16:53

不同瀏覽器中的單元格背景/邊框不對齊

回答

相關問題