由于边框折叠属性，HTML 表格有一条奇怪的粗体水平线

Question

编辑 1: 问题似乎出在 CSS 的border-collapse 属性上所以它可以通过使用边框间距来修复:0px。但是为什么边界崩溃会导致它呢？它与缩放有关，因为如果您放大或缩小窗口，它会导致奇怪的粗线，但在我的情况下，我将浏览器设置为默认缩放以及系统(Windows 11)也在推荐 125%(我一直使用)缩放。不明白怎么回事

最近，当我尝试创建 HTML 表格时，在某些行之后出现了一条奇怪的水平线。我附上了截图。代码是一个简单的 HTML 表格和简单的 CSS 添加边框没什么花哨的。我这里附上代码。

table.html

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
    </tr>
    <?php while($user= mysqli_fetch_array($query)){ ?>
    <tr>
        <td><?php echo $user['id']; ?></td>
        <td><?php echo $user['name']; ?></td>
        <td><?php echo $user['phone']; ?></td>
        <td><?php echo $user['email']; ?></td>
    </tr>
    <?php } ?>
</table>

style.css

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Answer 1

这是由于浏览器缩放处理不当造成的。

如果您有 1 像素的边框并将 DPI 缩放 设置为(例如 150%)，则从技术上讲，边框为 1.5 像素。因为浏览器不使用亚像素渲染，所以会在 1px 和 2px 之间交替显示。

有多种处理方法。

---

1。将 border-width 设置为 0.01px

一个快速而肮脏的解决方法，因为浏览器将回退到至少 1px

---

2。使用 resolution 媒体查询

将边框宽度更改为每个缩放级别的适当小数。

@media (min-resolution: 120dpi) {
  table, th, td {
    border-width: 0.75px;
  }
}

@media (min-resolution: 144dpi) {
  table, th, td {
    border-width: 0.666px;
  }
}

@media (min-resolution: 192dpi) {
  table, th, td {
    border-width: 0.5px;
  }
}

以下是不同 DPI 缩放级别及其值的概述

DPI 缩放级别

• 较小的 100%(默认)= 96 dpi
• 中等 125% = 120 dpi
• 更大的 150% = 144 dpi
• 超大 200% = 192 dpi

---

3。 JavaScript

使用 JavaScript 使用 window.devicePixelRatio 变量将边框宽度更改为每个缩放级别的适当小数。