Question

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

Answer 1

在border-spacing:0级别尝试border-collapse:collapse而不是table.demo。

如果它打破了ie6 / 7，那么你可以在条件CSS引用中包含border-collapse。

Answer 2

您的问题是您使用背景图片来模拟border-right的{{1}}。背景图像在内部边界区域，而紧邻其下方的th.right具有1px的实际边框;浏览器使<td>和<th>内部宽度相同以排列列，但<td>显示宽1px，因为它具有1px的实际<td>。您的border-right隐藏了其他单元格中的宽度问题。

解决方案是将背景图像用作背景图像和边框边框。或者，使用背景图像技巧将左右边框放在border-collapse: collapse元素上。

不同浏览器中单元格背景/边框的错位

2 个答案: