关于浏览器缩放导致的border出现缝隙的问题

最新推荐文章于 2024-08-02 12:19:30 发布

小方在学前端ing~

最新推荐文章于 2024-08-02 12:19:30 发布

阅读量563

点赞数

分类专栏： html+css实现效果文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_45838639/article/details/129027344

版权

html+css实现效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先来看效果

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x07U6MPH-1676358624871)(image-20220916152138071-16633158312371.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9jG19BI-1676358624872)(image-20220916152150950-16633158501542.png)]

<body>
    <div class="box">
        <div class="div1">
            <div class="content"></div>
        </div>
        <div class="div2">
            <div class="content"></div>
        </div>
    </div>
</body>
<style>
    .box{
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    .div1,
    .div2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        box-sizing: border-box;
    }

    .div2 {
        border: 2px solid red;
        margin-left: 50px;
    }

    .content {
        width: 100%;
        height: 100%;
        background-color: sandybrown;
    }
</style>

现象

div1与div2大小一致，div2仅比div1多了边框里面的content宽高也占父级的100%，但是在页面不同缩放比例的情况下，出现了空白缝隙。

造成该现象的原因

因为浏览器在缩放时，其真实像素和设备相关连，就相当于是理论像素和物理像素不一的可能性

解决办法

在.content盒子（也就是子盒子）添加如下代码：

border: 2px solid red; //当然1px也是可以的，那对应的margin就是-1px,此案例用的2px
        margin: -2px;

浏览器效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OIl7xpTy-1676358624872)(image-20220916153443721.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwwduzwP-1676358624873)(image-20220916153511481.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vldlkgkl-1676358624873)(image-20220916153521893.png)]

小方在学前端ing~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于浏览器缩放导致的border出现缝隙的问题

关于浏览器缩放导致的border出现缝隙的问题
复制链接

扫一扫

专栏目录