• 1
  • 新人请关照

给菜单每一个选项设置了个1px的div,但是有的渲染成2px

我查了下常见的处理方式,都不行,不知道是哪里的问题,求助
image

<!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>
阅读 57
评论
    2 个回答

    border的height写的是大写的PX,是不是很尴尬

      相似问题
      社区建设
      合作问答

      欢迎来到 SegmentFault 0x 社区建设。这里可以讨论有关 SegmentFault 的一切,帮助我们改进产品、完善社...

      推荐文章