填充容器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中不工作

回答

相关问题