weixin_52938803
墨笔练字
2021-01-29 09:31
采纳率: 100%
浏览 30

诡异!请问利用li制作间隔线,统一设置1px宽度,为什么显示粗细不一样呢?

 <title>Document</title>

    <style>

        li {

            list-style: none;

            float: left;

        }

 

        li {

        margin: 9px 20px;

        width: 1px;

        height: 100px;

        background-color: #c81623;

}

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

   

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • Menkongkong
    Menkongkong 2021-02-01 16:40
    已采纳

    这个可能是物理像素问题,在一个10*10像素的屏幕中,一共有一百个像素点,1像素宽的一条线出现的可能有很多种,比如我拿出两个像素,把这条线画在两个像素中间,也就是每一个像素各占了一半,组成了一像素,这时系统会自动向两边渲染,将这两个像素全部渲染出来,系统在这样的条件下多渲染出来的一像素在颜色上会与原像素颜色有一个模糊差别,你可以用canvas试一下,放大这个差别。

    点赞 1 评论
  • weixin_39411655
    panliyou 2021-01-31 14:59

    你放大或缩小页面就会发现这个是分辨率的问题

    点赞 1 评论
  • qq_43490212
    -4444x- 2021-02-02 18:13

    电脑分辨率的问题

    点赞 1 评论
  • zhangxin0w0
    BCS-点心 2021-01-29 09:36

    有点意思,还挺对称,页面开F12看看具体样式吧,应该能排查到

    点赞 评论
  • HDdgut
    HDdgut 2021-01-29 09:43

    考虑一下margin塌陷以及margin合并的问题

    点赞 评论

相关推荐