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

Posted 2023-03-05

【中文标题】Chrome 1px td 之间不可避免的间距

【英文标题】：Chrome 1px unavoidable Spacing between td

【发布时间】：2011-11-15 06:01:54

【问题描述】：

我遇到的问题似乎只在 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/

【问题讨论】：

Losing :hover status on <tr> between <td>'s in Chrome的可能重复

有同样的问题，没有解决方案，除了脏 -1px 定位。实际上是 0.5px，而不是 1px。

【参考方案1】：

有趣的是，这不是由边界引起的。如果您将边框宽度设置为 10 像素，那么导致此问题的单元格之间仍然只有 1 像素。

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

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

【讨论】：

+1，因为它是一个可能的解决方案。但是可能会对其他浏览器产生一些负面影响，并且由于位置相对计算，肯定会对渲染性能产生一些负面影响。

【参考方案2】：

正如this question 中提到的，这将解决它：

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

还有JsFiddle。

【参考方案3】：

默认情况下，表格具有单元格填充和单元格间距。您需要添加：

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

【参考方案4】：

在css中给出border-spacing:-1px。