css自动占满余量,css余量：自动未在webkit浏览器（Chrome和Safari）中最大化/全屏时居中div...

的问题是，内容的div(ID =内容)，不在Chrome和Safari定心。

它位于右侧。

内容div被一个名为bottom的div包围，其宽度为100％;和高度：自动;。

#bottom{

width:100%;

height:auto;

padding:0px;

margin:0px;

}

#content{

width:862.4px;

height:402px;

margin:auto;

padding-left:10px;

padding-right:10px;

padding-top:5px;

padding-bottom:5px;

background-color:#030303;

background-image:url(images/main.png);

-moz-border-radius:15px;

border-radius:15px;

border-style:solid;

border-color:#181818;

border-width:4px;

margin-top:60px;

-moz-box-shadow: 1px 1px 20px 4px black;

-webkit-box-shadow: 1px 1px 20px 4px black;

box-shadow: 1px 1px 20px 4px black;

overflow:hidden;

}

我发现如果我删除溢出：从内容CSS隐藏然后它正确居中。 但我需要这个(对于未在链接中显示的部分)

我也发现它可以工作，如果我完全删除菜单。 所以我认为在菜单css中必须有这样的东西。 它在Firefox(4)中正常工作。

我运行Chrome 11.0.696.68 和Safari 5.0.5

哦！我刚刚注意到，只有当Chrome最大化时，它处于“窗口模式”(缺少更好的名称)时才会发生这种情况，即使窗口拉伸到屏幕的全部大小，它也能完美对中。

我也注意到，如果你删除#copyright，那么＃content会在左边呈现，如果两个#copyright和#choice都被删除，那么内容div在中间呈现，如果你只删除#choice它仍然呈现在右边。

如果删除#menu_all，则它会正确居中。

任何帮助将不胜感激，

感谢

2011-05-17

Richard

+0

仅供参考 - 使用子像素值不是一个好主意。浏览器围绕整个像素(因为像素是浏览器可以理解的最小度量单位)，并且每个浏览器的轮次不同 - http：// ejohn。org/blog/sub-pixel-problems-in-css/ –

2011-05-17 13:25:10

+0

这很公平。我正在使用一个具有指定宽度的模板，但我想如果我只是舍入任何一种方式，它的工作原理都是一样的。 –

2011-05-17 13:51:41