移动端fixed定位，两个元素间出现缝隙的问题。

发布于 2022-09-06 12:27:42 字数 1070 浏览 18 评论 0

两个元素分别做绝对定位，上下两个元素间在pc端没有缝隙，但是在移动端有1px的缝隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/reset.css">
    <script name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
    </script>
    <title>移动阅读器</title>
    <style>
        .bkg{
            width: 100%;
            position: fixed;
        }
        .bkg1{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
        }
        .bkg2{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 0;
            background: black;
        }
    </style>
</head>
<body>
    <div class='bkg'>
        <div class='bkg1'></div>
        <div class='bkg2'></div>
    </div>
    
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七色彩虹 2022-09-13 12:27:42

在bkg2上加上｛margin-top:-2px｝就解决了

回复收藏 0

月棠 2022-09-13 12:27:42

在style里面加上全局样式即可。
*{margin: 0;padding: 0;}

*代表整个项目中所有的元素被选中，选中之后，所有的margin和padding都为0
即
最终代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/reset.css">
    <script name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
    </script>
    <title>移动阅读器</title>
    <style>
    *{margin: 0;padding: 0;}
        .bkg{
            width: 100%;
            position: fixed;
        }
        .bkg1{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
        }
        .bkg2{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 0;
            background: black;
        }
    </style>
</head>
<body>
    <div class='bkg'>
        <div class='bkg1'></div>
        <div class='bkg2'></div>
    </div>
    
</body>

因为手机和电脑的浏览器对元素的默认边距不一样，导致两种设备看到的效果不一样，你在手机上看不到边距，事实上是手机没有定义，而电脑浏览器会默认给元素加上默认的边距。
加上*{margin:0px;padding:0px;}
这样的话，无论手机或者电脑，都不会存在差异。

回复收藏 0

~没有更多了~