填充容器div在Google Chrome中不工作

我有一個固定寬度居中的模板，我想在「main」div的左側和右側應用10px填充。因此，在小屏幕上，網站不會觸摸屏幕的左側。它適用於IE，Firefox，Safari，Opera，但不適用於Google Chrome。填充容器div在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。（將來可能會改變！）

謝謝！

來源

2012-02-02 erfan

在這種情況下，它不適用於任何瀏覽器，因爲儘管出現了10px的間隙，但頁面實際上仍在橫向滾動。至少這是我在Safari和Chrome中獲得的行爲。

取而代之 - 您想要使用的是最大寬度。這可以防止寬度超過980像素，但可以使用width：auto直到該點。

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

最大寬度與所有主流瀏覽器包括兼容IE7 +

你應該處理較小的屏幕尺寸也結賬CSS媒體查詢： http://css-tricks.com/css-media-queries/

來源

2012-02-02 06:04:12

謝謝！你是對的，但在我的情況下，谷歌瀏覽器甚至不會在兩側添加10px的空白。 – erfan 2012-02-02 06:56:22

這是更好地定義min-width到#main代替padding是這樣的：

#main { 
    min-width:1000px; 
    }

來源

2012-02-02 06:14:44 sandeep

這是一個更好的選擇。我會盡快嘗試。我的代碼中有沒有錯誤？或者你認爲這是瀏覽器中的錯誤？ – erfan 2012-02-02 07:10:29

你的代碼不錯，可能是這個bug – sandeep 2012-02-02 07:19:58

嘗試過這個，但是在chrome中出現同樣的問題。適用於其他瀏覽器。 – erfan 2012-02-02 07:44:13

填充容器div在Google Chrome中不工作

回答

相關問題