Question

我遇到的问题似乎只发生在Chrome中，而不是其他地方。我有一个表，在悬停时应用了它的样式。在其他浏览器中，当将鼠标悬停在行的任何部分上时，将应用该样式。但是，在chrome中，在每个td的边缘处，不再应用样式。如果我在单元格之间的这个小的1px宽区域上“检查元素”，则元素窗格显示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

有趣的是，这不是边境造成的。如果将边框宽度设置为10px，则导致此内容的单元格之间仍然只有1px。

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

注意：我已添加填充以保持大小一致

Answer 2

如this question中所述，这将解决它：

td {
    padding: 2px 5px;
    position:relative;
}

JsFiddle。

Answer 3

默认情况下，该表具有cellpadding和cellspacing。您需要添加：

<table cellspacing="0" cellpadding="0">

Answer 4

在css中提供 border-spacing：-1px 。

Chrome 1px不可避免地在td之间间隔

4 个答案: