给菜单每一个选项设置了个1px的div，但是有的渲染成2px
我查了下常见的处理方式，都不行，不知道是哪里的问题，求助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab-box-item {
height: 54px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 54px;
margin-left: 53px;
cursor: pointer;
position: relative;
}
.tab-box-item-hover {
font-weight: bold;
}
@keyframes caiDan {
0% {
width: 0;
}
100% {
width: 24px;
}
}
.tab-box-item .border {
width: 24px;
height: 1PX;
position: absolute;
top: 50%;
left: -52px;
background: #000;
font-size: 0;
display: none;
border-collapse: collapse;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
.tab-box-item-hover .border {
display: block;
animation: caiDan .6s cubic-bezier(0.4, 0, 1, 1);
}
</style>
</head>
<body>
<div class="tab-box">
<div class="tab-box-item tab-box-item-hover">
<div class="border"></div>首页
</div>
<div class="tab-box-item tab-box-item-hover">
<div class="border"></div>中心简介
</div>
<div class="tab-box-item tab-box-item-hover">
<div class="border"></div>中心教学
</div>
<div class="tab-box-item tab-box-item-hover">
<div class="border"></div>科学研究
</div>
<div class="tab-box-item tab-box-item-hover">
<div class="border"></div>规章制度
</div>
<div class="tab-box-item tab-box-item-hover">
<div class="border"></div>联系我们
</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
啊 我设置border-top:1px 不给高度可以了
border的height写的是大写的PX，是不是很尴尬