所以我有一个直接放在body内的元素:
<body> <div id="header">Some stuff...</div> Other stuff... </body>
以下是使用的CSS:
body{ text-align:center; } #header{ margin:auto; }
所以#header div设置为100%宽度(默认),并且居中。问题是,窗口边框和#header元素之间有一个“空格”…像:
| |----header----| | ^window border ^window border
我尝试用javascript调整它,并且成功地将元素的大小调整到确切的窗口宽度,但是它不会消除“空格”:
$('#header').width($(window).width());
一个解决方案似乎是添加以下CSS规则(并保留上面的JavaScript):
#header{ margin:auto; position:relative; top:-8px; left:-8px; }
在我的浏览器中,这个“空间”是8px – 但我不知道所有浏览器是否相同?我在Ubuntu上使用Firefox
那么什么是摆脱这个空间的正确方法 – 如果这是我上面使用的,所有的浏览器都是一样的?
解决方法
身体在所有浏览器上都有默认的边距,所以你需要做的只是刮胡子:
body { margin: 0; text-align: center; }
然后,您可以从#header中删除负边距。