zoukankan      html  css  js  c++  java
  • 奇怪的body PHP

    测试的网页结构如下:

    <!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; 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; 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就可以了;


    欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
  • 相关阅读:
    linux 自动重启崩溃的进程
    oracle配置出现的问题
    Castle Nvelocity 循环,条件
    asp.net水晶报表初体验
    关于codesmith中文乱码的解决方法
    ref,out
    DIV覆盖DropDownList解决方案(转)
    xp下设置文件的权限(转)
    关于Godaddy空间存放DotNet网站出现500 Internal server error 错误的总结
    为什么设计师应该学习编写代码
  • 原文地址:https://www.cnblogs.com/zjfree/p/2285056.html
Copyright © 2011-2022 走看看