导航栏hover背景色异常：出现黑白细条问题求助

问题现象 #

导航栏列表项hover切换背景色时，左侧会出现白色细条、右侧出现黑色细条，视觉上像元素偏移1像素。这个问题只在body或html设置了背景色/背景图时出现，移除背景色后细条消失。

问题原因 #

这是vw单位产生的小数像素渲染误差导致的：当用vw设置元素宽度时，多数屏幕尺寸下会计算出非整数像素值，浏览器渲染亚像素元素时会出现微小偏移，下层背景色会透过偏移缝隙露出，形成看到的黑白细条。

解决方案 #

以下几种方法任选其一即可解决：

• 给导航栏的<li>元素添加transform: translateZ(0)，开启GPU加速让浏览器更精准处理亚像素渲染
• 给<li>设置outline: 1px solid transparent，用透明轮廓填补亚像素缝隙
• 若适配场景允许，将width:15vw替换为百分比或固定像素值，避免产生小数像素

修改后的CSS代码示例 #

/* basic body */
body {
  background-color: #0e95ef;
  padding-bottom: 7vw;
  width: 98vw;
}

/* (navBAR) Nav Bar Customization */
.navBAR a {
  margin: 0.7vw;
}

.navBAR {
  float: left;
  padding-left: 3vw;
  padding-bottom: 2vw;
  padding-top: 1.5vw;
  width: 98vw;
}

.navBAR ul {
  padding: 0vw;
  margin: 0px;
}

.navBAR ul li {
  background-color: blue;
  border-radius: 0vw;
  float: left;
  list-style: none;
  position: relative;
  width: 15vw;
  /* 新增解决代码，二选一即可 */
  transform: translateZ(0);
  /* outline: 1px solid transparent; */
}

.navBAR ul li a {
  color: white;
  display: block;
  font-size: 1.4vw;
  font-weight: bolder;
  text-align: center;
  text-decoration: none;
}

.navBAR ul li ul {
  display: inline;
  position: absolute;
  visibility: hidden;
  width: 10vw;
}

/* hover样式 */
.navBAR ul li:hover {
  background-color: orange;
  background-size: 100%, 100%;
  background-clip: border-box;
  color: black;
}

.navBAR ul li:hover a {
  color: black;
}

.navBAR ul li:hover ul {
  visibility: visible;
}

.navBAR ul li:hover ul a {
  color: white;
}

.navBAR ul li ul li:hover {
  background-color: orange;
}

.navBAR ul li ul li:hover a {
  color: black;
}

说明 #

HTML代码无需修改，保持原有结构即可。

内容的提问来源于stack exchange，提问作者DerekNotCool