测试的网页结构如下：
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body οnclick="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 οnclick="alert(1);">
<div><h1>aaaaaaa</h1></div>
</body>
</html>
如果HTML中第一个元素是H1，则在IE8、Chrome、FireFox中会在顶部出现一个白条。这是因为H1的margin引起的，只要H1将margin-top:0px就可以了;
扫一扫
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
