HTML未触及浏览器的顶部

我的网站并未触及浏览器的顶部。顶部几乎没有差距。HTML未触及浏览器的顶部

公然地说，身体并没有触摸窗口的顶部，我希望它触摸顶部。

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/

来源

2013-03-06 deerox

感谢@garreh编辑:) – deerox 2013-03-06 14:15:38

快速修复，风格化的身体和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/

来源

2013-03-06 14:01:57 Peter

感谢彼得它的作品:) http://cssreset.com/事情很好 – deerox 2013-03-06 14:22:31

只要提防一些常见的重置项目符号样式或强大的标签，他们往往会删除他们的样式然后您的列表中没有项目符号，强标记之间的文本不是粗体。你必须将它们设定为你自己想要它们的方式。 – Peter 2013-03-06 14:40:29

头版发现并非所有浏览器处理HTML元素的方式相同。

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

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

body { 
    margin:0; 
    padding:0; 
}

来源

2013-03-06 14:05:39 Brainfeeder

感谢Robrecht Wellens :) – deerox 2013-03-06 14:22:49

愉快deerox :) – Brainfeeder 2013-03-07 07:30:05

使用

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

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

来源

2013-03-06 15:04:08 madhushankarox

HTML未触及浏览器的顶部

回答

相关问题