如果对背景颜色使用十六进制表示法，则底部边框会消失

Question

我试图简单地在锚标记周围应用一个 1px 的实心边框，并用某种 "dark" 背景颜色表示为十六进制值，但我注意到底部边框不存在！

经过相当长时间的调查，我很惊讶地发现问题是由十六进制表示的背景颜色引起的：显然在这种情况下，浏览器开始渲染背景比正确位置低 1px，结果是背景颜色与底部边框重叠，如果背景颜色比边框颜色深，则结果是底部边框颜色 "disappears".

我做了一个 fiddle 试图描述这种行为：

  HTML
  <a href="#" id="a1">ANCHOR1</a>
  <br>
  <a href="#" id="a2">ANCHOR2</a>
  <br>
  <a href="#" id="a3">ANCHOR3</a>
  <br>
  <a href="#" id="a4">ANCHOR4</a>

CSS
a {
  text-decoration:none;
}
a, div {
  width:95%;
  padding-left:5%;
  display:block;
  border:1px solid red;
}

#a2, #d2 {
  background-color:yellow;
}

#a3, #d3 {
  background-color:#00ffb6;
}

#a4, #d4 {
  color:white;
  background-color:#1769b6;;
}

没有背景颜色的标签：您可以正确地看到它周围的边框
带有颜色名称定义的背景颜色的标签：边框仍然围绕着标签
具有浅色十六进制背景色的标签：您看到边框在那里，但背景色开始呈现为向下重叠底部边框 1px
具有深色十六进制背景颜色的标签：底部边框看起来 "disappeared"

我正在使用 Mac El Capitain 10.11.6 并尝试过：

火狐 51.0.1
chrome 56.0.2924.8
野生动物园 10.0.3

他们都以同样的方式行事。

知道如何在背景以十六进制表示的元素周围获得完整的 1px 实线边框吗？

正如我在 fiddle 对 divs 应用相同样式

中所证明的那样，问题与锚标记无关。

Answer 1

我用

解决了

background-clip: padding-box;

并定义稍厚的border-bottom-width

如果对背景颜色使用十六进制表示法，则底部边框会消失

bottom border disappearing if using a hexadecimal notation for the background color

css

hex

border

background-color