html - Chrome 1px不可避免的td之间的间距

Question

我遇到的问题似乎只出现在 Chrome 中，其他任何地方都没有。我有一张 table ，它在悬停时应用了一种样式。在其他浏览器中，将鼠标悬停在行的任何部分上时应用样式。但是，在 chrome 中，在每个 td 的边缘，不再应用该样式。如果我在单元格之间这个 1px 宽的小区域上“检查元素”，元素 Pane 会显示 Chrome 认为我在表格内，但不在行本身内。下面是一些产生这种效果的代码:

CSS:

table.tablesorter tbody tr:hover {
    background: #8dbdd8;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
    border: none;
}

HTML:

    <table id="myTable" class="tablesorter"> 
        <thead> 
            <tr> 
                <th>Title1</th> 
                <th>Title2</th> 
                <th>Title3</th> 
            </tr> 
        </thead> 
        <tbody>
            <tr> 
                <td>Bach</td> 
                <td>42526</td> 
                <td>Dec 10, 2002 5:14 AM</td> 
            </tr> 
            <tr> 
                <td>Doe</td> 
                <td>243155</td> 
                <td>Jan 18, 2007 9:12 AM</td> 
            </tr> 
            <tr> 
                <td>Conway</td> 
                <td>35263</td>
                <td>Jan 18, 2001 9:12 AM</td> 
            </tr> 
        </tbody> 
    </table>

有人以前见过这个/知道解决办法吗？

如果有帮助，我正在使用 Chrome 13.0.782.220。

现场演示:http://jsfiddle.net/yNPtU/

Answer 1

有趣的是，这不是边框造成的。如果您将边框宽度设置为 10 像素，单元格之间仍然只有 1 像素会导致这种情况。

我尝试设置似乎有效的 tds 位置。这是一个演示:http://jsfiddle.net/lnrb0b/6harr/

注意:我添加了内边距以保持大小一致