css - DIVはChrome/Firefoxの中央に配置されていますが、Safariでは中央に配置されていません

Question

私はTwitterBootstrapを使用していて、ページを作成しましたが、Chromeではすべてが正しく表示されます。ただし、Safariで表示した場合、コードが上に表示されている下部のdivは中央揃えではありません。

ブラウザがレンダリングするもの

- アップデート -

わかりました、私はそれをcssプロパティに絞り込んだと思いますwidthが、何らかの理由でChromeからSafariとは異なりますか？

私は全部をと呼ばれるdivで包みましたparaWrapper。

上記のコードはChromeでは正常に表示されますが、Safariでは適切ではありません。

ただし、幅を次のように変更すると720px、Safariでは問題なく表示されますが、Chromeでは正しく表示されません。

ですから、この時点での私の質問はそうだと思います。この違いがなぜあるのか誰かが知っていますか？

CSSハックを使用することでこれを回避できると思いますが、コードを修正してより永続的な修正を行うことができれば、それは素晴らしいことです。

score 0 · Accepted Answer

互換性のある問題が発生している場合は、0であっても、divのマージンとパディングを必ず指定してください。

padding: 0;
margin: 0;

score 0 · Accepted Answer

行を使用している場合は、次を使用する必要があります。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

クラス行を持つdivを使用することを忘れないでください。そこでは、spanXクラスを持つdivを使用します。ここで、すべてのスパンのこのXは合計12です。

また、center属性は使用しないでください。Bootstrapはあなたのためにそれを作ります。この例のコードを見てください

2 に答える 2