html - CSS Header 没有跨浏览器延伸？

Question

我遇到了一个我似乎无法弄清楚的非常奇怪的问题。

JSFiddle:http://jsfiddle.net/56dVJ/2/

我只有一个 ID 为“nav”的简单 div，然后在 css 中只有以下内容。

#nav {
    width: 100%;
    height: 50px;
    float: left;
    background-color: #000000;
    color: #FFFFFF;
}

基本上，我正在尝试创建一个横跨整个页面的简单 header 。但是，无论我做什么，标题周围都有一个空格，就像一个透明边框。

我查看了我能找到的所有教程和帖子，似乎没有人遇到同样的问题。 :(

我做错了什么？

Answer 1

Demo .. Source

nav 周围的空间是因为 body 中的 margin 属性，所以只需将其添加到您的 CSS :

body{
    margin: 0;
    padding: 0; /* additional for cross browsers */
}

此外，如果 width: 100%

，则无需添加 float: left

希望对你有帮助