如何禁用与单元格背景的边框颜色对比？答案

【问题标题】：How to disable border color contrast with cell background?如何禁用与单元格背景的边框颜色对比？
【发布时间】：2017-10-26 18:34:01
【问题描述】：

HTML 边框上的默认行为似乎与单元格背景颜色不同，施加了某种对比度来覆盖定义的边框颜色。我试图追踪问题以关闭此覆盖，但找不到它的来源。

下面的例子演示了这个问题：

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

.lav {
  background-color: lavender;
}

.medBlue {
  background-color: mediumblue;
}

<body>
  <table>
    <tr class="lav">
      <th>Firstname</th>
      <th>_</th>
      <th>Lastname</th>
    </tr>
    <tr class="lav">
      <td>Peter</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
    <tr class="medBlue">
      <td>Lois</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
  </table>
</body>

如预期的那样，前两行的边框颜色为浅灰色。但是，背景较暗的第三行的边框颜色被不同的颜色覆盖。

如何让这个表格的边框颜色统一？

here 提出了类似的问题，但我认为这个问题与透明度无关（至少，较暗单元格上的边框颜色会更暗，而不是更亮）。

编辑：这个问题似乎与缩放程度有关，这让我相信这是浏览器对边框宽度（任意？）被认为太小时所做的修正。换句话说，当放大表格时，颜色会更改为预期的颜色。一种解决方法是简单地使边框变厚，但我想避免这种情况。当使用 PhantomJS 加载此类表并随后对其进行截图时，问题仍然存在，这就是我需要此代码的目的。

编辑2：根据Mr.Lister 的评论，我检查了十六进制，有一阵子觉得我疯了，结果却是一样的。然后我尝试了不同的屏幕（12 到 55 英寸）来检查这是否确实只是一种视错觉，但这没有定论。效果因屏幕而异，绝对大小似乎不是根本原因。虽然我在这个阶段犹豫是否要彻底消除感知，但它更有可能与个人显示渲染有关（你该死的孩子和你的智能色彩调节屏幕！）。在任何情况下，颜色对于所有密集目的来说确实是相同的，这意味着不能通过调整任何 CSS 声明来修复对比度。第一个答案建议简单地使颜色变暗，这似乎是要走的路。

【问题讨论】：

在我的浏览器中，表格中的所有边框都是相同的 (#d3d3d3)。
你唯一能做的就是增加边框颜色的暗度来取悦眼睛。 .medBlue td {border-color: gray; }.

标签： html css border border-color

【解决方案1】：

你唯一能做的就是增加边框颜色的暗度来取悦眼睛。 .medBlue td {border-color: gray; }.

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

.lav {
  background-color: lavender;
}

.medBlue {
  background-color: mediumblue;
}
.medBlue td {
  border-color: gray;
  }

<body>
  <table>
    <tr class="lav">
      <th>Firstname</th>
      <th>_</th>
      <th>Lastname</th>
    </tr>
    <tr class="lav">
      <td>Peter</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
    <tr class="medBlue">
      <td>Lois</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
  </table>
</body>

【讨论】：