移动端产生1px缝隙的问题。

Question

移动端产生1px缝隙的问题。

发布于
2018-01-27

两个元素是固定定位，图中的文字如果产生滚动条，下面的两个元素中间就会产生1px的缝隙，如果没有滚动条(把文字大小和行高设置)，就不会产生，所以怎样在有滚动条的情况下去掉两个元素间的缝隙？
图片描述

<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>
        .bkg1{
            width: 100%;
            height: 120px;
            background: #232222;
            position: fixed;
            bottom: 0;
            left: 0;
            opacity: 0.9;


        }
        .bkg2{
            position: fixed;
            bottom: 120px;
            left: 0;
            width: 100%;
            background: #232222;
            opacity: 0.9;
            height: 170px;
            margin-bottom: -2px;
        }
        .font{
            margin: 30px;
            font-size: 15px;
            line-height: 3;
        }
    </style>
</head>
<body>
        <div class='font'>
            <p>
                童童知道；有姐的日子不多了，就喜欢冰河和田野里洁白的泽光，童童喜欢与姐姐趴在白马上，哒哒哒，冰层上的浪漫，红树林里穿梭，让童童睡在姐姐的掌心，躲进了姐姐的眉额，发辫里、亲着姐微颤的唇！啊！童童躲进了姐姐的心房，听；心跳，姐，绯红的脸颊。
            </p>
            <p>
                童童知道；有姐的日子不多了，就喜欢冰河和田野里洁白的泽光，童童喜欢与姐姐趴在白马上，哒哒哒，冰层上的浪漫，红树林里穿梭，让童童睡在姐姐的掌心，躲进了姐姐的眉额，发辫里、亲着姐微颤的唇！啊！童童躲进了姐姐的心房，听；心跳，姐，绯红的脸颊。
            </p>
            <p>
                童童知道；有姐的日子不多了，就喜欢冰河和田野里洁白的泽光，童童喜欢与姐姐趴在白马上，哒哒哒，冰层上的浪漫，红树林里穿梭，让童童睡在姐姐的掌心，躲进了姐姐的眉额，发辫里、亲着姐微颤的唇！啊！童童躲进了姐姐的心房，听；心跳，姐，绯红的脸颊。
            </p>
            
        </div>
        <div class='bkg1'></div>
        <div class='bkg2'></div>
    
</body>
<script>

</script>
</html>>

移动端web

html5

阅读 3.5k

1 个回答

去掉margin-bottom: -2px;

撰写回答