固定宽度div中的居中按钮在ipad中向左移动

Question

div中有一个按钮，由<section>包围：

<div id="body">
    <section>
        <div class="area">
            <button>Hello!</button>
        </div>
    </section>
</div>

#body，其<section>具有固定宽度，.area具有50px填充：

#body{
width:600px;
margin:0 auto;
background:#eee;
}
section{
width:300px;
margin:0 auto;
background:#FFF;
}
.area{
padding:50px;
}
button {
display: block;
margin: 0 auto;
}

一切都在我的显示器中完成，按钮完全居中。但是在ipad上它转向左边：

您可以看到此案例的实际效果： http://jsfiddle.net/c2HLe/

Answer 1

如果您不使用CSS重置，您可能需要尝试查看是否有某些浏览器标准弄乱了您的布局。