博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

奇怪的body

Posted on 2011-12-12 16:59  PHP-张工  阅读(1158)  评论(0)  编辑  收藏  举报

测试的网页结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
</head>
<body onclick="alert(1);">
<div>aaaaaaa</div>
</body>
</html> 

打开网页后，点击空白处并不会触发body的onclick事件。只有点击有文字的那一行才会触发。说明body没有充满网页。

但奇怪的是IE、Chrome如上面所说。而火狐点击空白处会触发onclick事件。

为了看一下body的范围，加上如下样式

<style type="text/css">
body{background-color:#eee;}
</style> 

重新刷新网页，整个网页背景都变成了#eee，难道body真撑满了？

将样式修改如下：

html{background-color:white;}
body{background-color:#eee;}

重新刷新，这下终于看清了，body只是顶上很小的范围。

如何让body充满呢？修改样式如下：

html{background-color:white; height:100%;}
body{background-color:#eee; height:100%; margin:0px;}

刷新后，看到body充满了真个网页，点击事件也都可以响应了。

如果将样式修改为：

html{background-color:white; height:100%;}
body{background-color:#eee; height:100%; margin:0px auto; width:900px; }

会看到body在页面中居中了，并且有颜色区分。

后记

如将代码修改如下：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <style type="text/css">
        html{background-color:white; height:100%;}
        body{background-color:#eee; height:100%; margin:0px auto; width:900px; }
    </style> 
</head>
<body onclick="alert(1);">
<div><h1>aaaaaaa</h1></div>
</body>
</html> 

如果HTML中第一个元素是H1，则在IE8、Chrome、FireFox中会在顶部出现一个白条。这是因为H1的margin引起的，只要H1将margin-top:0px就可以了;