鍍金池/ 問答/HTML5  HTML/ 移動端fixed定位，兩個元素間出現(xiàn)縫隙的問題。

移動端fixed定位，兩個元素間出現(xiàn)縫隙的問題。

兩個元素分別做絕對定位，上下兩個元素間在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>
回答
編輯回答
賤人曾

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

2017年6月26日 01:40
編輯回答
吢涼

在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>

因為手機和電腦的瀏覽器對元素的默認邊距不一樣，導(dǎo)致兩種設(shè)備看到的效果不一樣，你在手機上看不到邊距，事實上是手機沒有定義，而電腦瀏覽器會默認給元素加上默認的邊距。
加上*{margin:0px;padding:0px;}
這樣的話，無論手機或者電腦，都不會存在差異。

2017年4月28日 21:22