Google Chromeで動作しないコンテナdivの埋め込み

Question

私は固定幅中心のテンプレートを持っていて、 "main" divの左右に10pxのパディングを適用したかったのです。小さな画面ではサイトが画面の左側に触れることはありません。 IE、Firefox、Safari、Operaでは動作しますが、Google Chromeでは動作しません。

<style type="text/css"> 
    #main { 
    padding:0 10px; 
    } 
    #wrap { 
    width:980px; 
    margin:0 auto; 
    } 
</style> 
<div id="main"> 
    <div id="wrap"> 
    </div> 
</div> 

私は、CSSが、無成功の様々な組み合わせを試してみました：

は、ここで関連するコードです。実際のページhereをご覧ください。 （今後変更される可能性があります）

ありがとうございます！

Answer 1

この場合、10pxのギャップが現れてもページが実際に横方向にスクロールするため、どのブラウザでも機能しません。少なくともこれはSafariとChromeでの動作です。

代わりに、使用したいものはmax-widthです。これにより、幅が980ピクセルを超えることはありませんが、そのポイントまでは幅：自動で表示されます。

#wrap { 
    max-width: 980px; 
    margin:0 auto; 
} 

の最大幅は、あなたがより小さな画面サイズを処理するためにも、チェックアウトCSSメディアクエリをすべきIE7 +

を含むすべての主要なブラウザと互換性があります。 http://css-tricks.com/css-media-queries/

Answer 2

それはmin-width#mainに代わりのを定義する方が良いでしょうpaddingこのように：

#main { 
    min-width:1000px; 
    }