网站在 iPhone 和 iPad 上显示 20 像素的内边距答案

【问题标题】：Site shows 20px padding on iPhone & iPad网站在 iPhone 和 iPad 上显示 20 像素的内边距
【发布时间】：2014-01-08 15:38:43
【问题描述】：

我已经为我的网站创建了一个测试页面，它几乎去除了所有内容，但仍然无法摆脱 iPhone 或 iPad 上 20 像素左右的填充。

请在https://lacrafts.worldsecuresystems.com/test查看测试页面。

我已经尝试过媒体样式、删除填充等。任何帮助将不胜感激。

<body id="sub_body" data-twttr-rendered="true">
     <div id="site_wrap" class="clearfix">
          <div id="header-wrap" class="clearfix">
            <div id="header" class="clearfix">dasd<br>fdsfds<br>jhkljklj<br></div>
     </div>
</body>

以下是相关的 HTML 样式：

body {
    margin:0;
    padding:0;
    font-family:Calibri, Tahoma;
    font-size:14px;
    color:#1d1d1d;
    background:#ee2505;
    font-weight:regular;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#site_wrap {
    border-top:8px solid #1d1d1d;
    background-color:#ffffff;
    width: 100%;
    margin:0;
    padding:0;
}

#header-wrap {
    background-color:#ffffff;
    width:100%;
    margin:0;
    padding:0;
}
#header {
    width:1000px;
    margin:0 auto;
}

/* *********************** CLEARFIX **************************** */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

【问题讨论】：

标签： html iphone css ipad mobile

【解决方案1】：

我在移动开发中遇到过这样的问题。我发现向我的页面添加一个包含整个内容的 div 并将其样式设置为：

{
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
}

【讨论】：