• 奇怪的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/ ]
  • 相关阅读:
    15天玩转redis —— 第四篇 哈希对象类型
    15天玩转redis —— 第三篇 无敌的列表类型
    15天玩转redis —— 第二篇 基础的字符串类型
    15天玩转redis —— 第一篇 开始入手
    双十一来了,别让你的mongodb宕机了
    AutoIncrement无法设置的问题
    Frame animation
    Tween animation
    在project窗口中快速定位文件
    Activty左出右进动画
  • 原文地址:https://www.cnblogs.com/zjfree/p/2285056.html
Copyright © 2020-2023  润新知