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

Question

我试图简单地在 anchor 标记周围应用一个 1px 实心边框，并使用以十六进制值表示的某种“深色”背景颜色，但我注意到底部边框不存在!

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

我做了一个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;;
}

1. 没有背景颜色的标签:您可以正确地看到它周围的边框
2. 用颜色名称定义背景颜色的标签:边框仍然围绕着标签
3. 带有浅色十六进制背景色的标签:您会看到边框在那里，但背景色开始呈现为比底部边框低 1 像素
4. 带有深色十六进制背景色的标签:底部边框看起来“消失了”

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

• 火狐 51.0.1
• Chrome 56.0.2924.8
• Safari 10.0.3

它们的行为方式都相同。

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

这个问题与 anchor 标签无关，正如我在 fiddle 中证明的那样，将相同的样式应用于 div。

Answer 1

我用

解决了

background-clip: padding-box;

并定义一个稍厚的 border-bottom-width