2

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

坦率地说，身体没有接触到窗户的顶部，我希望它接触到顶部。

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/

4

3 回答 3

6

快速修复，将 body 和 html 标签风格化，如下所示：

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

进一步阅读，CSS重置：

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

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

显然，这给 CSS 作者带来了一定程度的头痛，他们无法弄清楚如何使他们的网站在每个浏览器中看起来都一样。（注意：即将发布关于为什么这是一个错误概念的文章！）

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

（来源）

资源：

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

其他常用的重置技术可以在 http://cssreset.com/的首页一起找到

于 2013-03-06T14:01:57.473 回答
2

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

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

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

body {
    margin:0;
    padding:0;
}
于 2013-03-06T14:05:39.303 回答
0

采用

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

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

于 2013-03-06T15:04:08.823 回答