Question

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加载这些表并随后截取它们时，问题就成立了，这就是我需要这个代码的地方。

EDIT2：根据李斯特先生的评论，我检查了十六进制，一会儿之后，我发现它是相同的疯狂。然后我尝试了不同的屏幕（12到55英寸）来检查这是否确实只是一种视错觉，但这是不确定的。效果因屏幕而异，绝对大小似乎不是根本原因。虽然我在这个阶段犹豫不决，但它很可能与个人的显示渲染有关（你可以尝试孩子和你的智能调色屏！）。在任何情况下，对于所有密集目的，颜色确实相同，这意味着无法通过调整任何CSS声明来修复对比度。第一个答案，建议简单地使颜色变暗，似乎是要走的路。

Answer 1

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

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

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

1 个答案: