Css 如果使用十六进制表示法作为背景色，则底部边框将消失

我试图简单地在锚定标记周围应用一个1px的实心边框，并用十六进制值表示特定的“暗”背景色，我注意到底部边框不在那里

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

我试着描述一下这种行为：

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

HTML






CSS
a{
文字装饰：无；
}
a、 div{
宽度：95%；
左：5%；
显示：块；
边框：1px纯红；
}
#a2，#d2{
背景颜色：黄色；
}
#a3、#d3{
背景色：#00ffb6；
}
#a4、#d4{
颜色：白色；
背景色：#1769b6；；
}

没有背景色的标记：您可以正确地看到它周围的边框

使用颜色名称定义的背景色标记：边框仍在标记周围

带有浅十六进制背景色的标记：您可以看到边界在那里，但背景色开始呈现为比底部边界低1倍的颜色

带有黑色十六进制背景色的标记：底部边框看起来“消失”

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

• 火狐51.0.1
• 铬56.0.2924.8
• safari 10.0.3

他们的行为方式都一样

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

这个问题与锚定标记无关，正如我在小提琴中证明的那样，将相同的样式应用于div

我使用

background-clip: padding-box;

---

定义一个稍微厚一点的边框底部宽度

对我来说，在Windows10上的Chrome浏览器上似乎很合适。你能发布一个截图吗？是的，底部的边框就像@KyleMartin所说的那样。我在Windows10上使用Chrome，但是你可以简单地将十六进制转换成十进制！这并不难，只要你知道红、绿、蓝的格式，你大概可以在5分钟内完成！此外，还有一些计算器。我可以看到边框底部，尝试添加框大小：边框框，看看它是否有任何不同。@Ty Q：我也尝试了RGB，但它没有任何不同。很遗憾，我肯定看到了不同的东西，你试过其他浏览器吗？