Question

我的网站没有触及浏览器的顶部。顶部差距很小。

公然地说，身体没有触及窗户顶部，我希望它能触及顶部。

HTML：

<div id="container">
    <div id="header">
        <h1>
            Example
        </h1>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>
</div>

CSS：

#container
{
    margin: 0 auto;
    width: 350px;
    background: #fff;
    float: left;
}

#header
{
    background: #ccc;
    padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 350px;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover 
{ 
    background: #383; 
}

这是一个例子：

http://jsfiddle.net/deerox/YxwqX/

Answer 1

快速修复，将body和html标签设置为样式化，如下所示：

html, body
{
    margin: 0;
    padding: 0;
}

进一步阅读，CSS重置：

CSS重置（或“重置CSS”）是一组简短的，经常压缩（缩小）的CSS规则，可将所有HTML元素的样式重置为一致的基线。

如果您不知道，每个浏览器都有自己的默认“用户代理”样式表，它用于使无样式的网站看起来更清晰。例如，大多数浏览器默认情况下使链接为蓝色，访问链接为紫色，为表提供一定量的边框和填充，将可变字体大小应用于H1，H2，H3等，并对几乎所有内容应用一定量的填充。有没有想过为什么每个浏览器中的提交按钮看起来都不同？

显然，这给CSS作者带来了一定的麻烦，他们无法弄清楚如何让他们的网站在每个浏览器中看起来都一样。（注意：文章很快就会说明为什么这是一个错误的概念！）

使用CSS重置，CSS作者可以强制每个浏览器将其所有样式重置为null，从而尽可能避免跨浏览器的差异。

（source）

<强>资源：

我正在使用HTML5 reset，这是我最喜欢的。

其他常用的重置技术可以在http://cssreset.com/

的首页找到

Answer 2

并非所有浏览器都以相同的方式处理HTML元素。

您应该使用重置css文件来撤消浏览器的样式。（google）只需css reset

在这种情况下，它是<body>标记，在浏览器中有标准的边距/填充。

body {
    margin:0;
    padding:0;
}

Answer 3

使用

html,body{
    padding:0px;
    margin:0px;
}

似乎你是CSS新手。您可能必须使用CSS浏览器重置来实现跨浏览器兼容的设计。

HTML并没有触及浏览器的顶部

3 个答案: