html - マージン中央ボタンが iPad で左にシフトする

Question

それは私のボタンです：

<div id="body">
    <button>Hello</button>
</div>

とそのスタイル:

#body{
    width:400px;
    margin:0 auto;
    background:#eee;
    border:1px solid #ccc;
}
button {
    display: block;
    margin: 0 auto;
}

中央に配置されていますが、iPad で結果を見てみましょう。

左にずれます。

このケースを見てみましょう: http://jsfiddle.net/c2HLe/9/

ノート。 これは前回の質問と似ていますが、今回はシンプルな構造で作ったので、問題に集中できると思います。

Answer 1

を使用してボタンを中央margin: 0 auto;に配置するには、ボタンの幅も定義する必要があります。このようなもの。

または、これを使用することもできます。

#body{
    text-align: center;
}
 button {
    display: inline-block;
}

元の CSS で、コンテナーの幅 (マージン + ボーダー + パディング + コンテンツの幅) が 1024px (iPad ビューポートの幅) を超えると、予期しない結果が生じます。ですから、そのことを心に留めておいてください。