不同浏览器中的单元格背景/边框不对齐

我开发了一个带有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

不同浏览器中的单元格背景/边框不对齐

回答

相关问题