处理游览器缩放带来的border出现缝隙的问题

无糖的酸奶

已于 2022-03-03 08:49:04 修改

阅读量2.4k

点赞数 6

分类专栏： CSS 文章标签： css 游览器缩放问题前端 css3 border问题

于 2022-03-02 22:48:12 首次发布

本文链接：https://blog.csdn.net/nihoajy/article/details/123241104

版权

当浏览器缩放时，相同代码的元素可能会出现border之间的白色缝隙。问题源于浏览器处理缩放时的像素误差。解决方法包括使用负margin、box-shadow以及改变布局方式为拼接，而非嵌套。通过负margin使子元素覆盖父元素border，或利用box-shadow避免溢出，以及调整布局结构避免缝隙产生。

摘要由CSDN通过智能技术生成

收到一个师弟的问题，说同样的代码，有的有问题，有的没有问题。不知道为什么

问题是这样子的

在这里插入图片描述
左边的不会，但右边的会。但代码是一样的
这个问题，早在我当时初学的时候也发现了。不过当时没有找到很好的解决办法。

对此，我先是查看了结构和样式。
发现的盒子，就比立即抢购这个元素多了 1px 的 border 。但在放大和缩小时，即使通过开发者工具查看还是仅是多个border 。但却出现了白色空隙。

对于出现的原因，我不记得之前在哪里看到过了。说是因为游览器在处理这种情况时，本身有一个适合的大小。
就比如 1px 是一个像素（不一定）。在放大或者缩小时，比如放大 125% 。 1.25个像素？可最小的计量单位就是一个像素呀！因此就可能出现误差。
（如果有错误，请大佬指出哦！）
当然，这不好解释有的会，有的不会的情况。因此有没有知道的大佬可以解释一下！
在这里插入图片描述

解决办法：

先用简单的代码，模拟这个问题情况。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="content"></div>
    </div