渲染以PC浏览器为中心，但未在iphone浏览器中对齐

Question

好吧，我有一个居中的div用作页脚，只需：<div id="bottom-footer">Powered by Coolname</div>和样式：

#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}

这在PC浏览器中呈现：

但是当你尝试使用iphone时，它看起来像这样：

显然没有集中，我做错了什么？

Answer 1

看起来在包含body元素或div本身上有边距或填充。将其添加到样式表以重置浏览器的自然行为：

html {
margin:0px;
padding:0px;
}

body {
margin:0px;
padding:0px;
}

#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
margin:0px;
padding:0px;
}

Answer 2

删除width:100%

#bottom-footer {
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}