您的位置：首页 > Web前端 > HTML

<!Doctype html>对body高度影响

2013-04-10 10:25 441 查看
一、关于<!Doctype html>的说明

参考：DOCTYPE HTML PUBLIC的官方定义

二、关于标题的问题的解答

xhtml申明css1compat模式下，body没有内容，IE，chrome下点击时无法响应事件，但是firefox会响应，即使document.body.clientHeight不为0，firefox的bug？

<!doctype html>

<title>css1compat模式下，body没有内容，IE，chrome下点击时无法响应事件，但是firefox会响应，即使document.body.clientHeight不为0，firefox的bug？。。</title>

<script type="text/javascript">

<!--

function m(event){

x=event.clientX;

y=event.clientY;

alert("X:"+x+",Y:"+y);

}

window.onload=function(){alert(document.compatMode+'\n'+document.body.clientHeight)}

//-->

</script>

</head>

<body onMousedown="m(event)">

</body>

去掉xhtml变为backcompat模式时，body中没有内容，但是实际的clientHeight为可见高，IE，firefox，chrome下都可以响应mousedown事件

<title>去掉xhtml变为backcompat模式时，body中没有内容，但是实际的clientHeight为可见高，IE，firefox，chrome下都可以响应mousedown事件</title><script type="text/javascript">

<!--

function m(event){

x=event.clientX;

y=event.clientY;

alert("X:"+x+",Y:"+y);

}

window.onload=function(){alert(document.compatMode+'\n'+document.body.clientHeight)}

//-->

</script>

</head>

<body onMousedown="m(event)" style="background:#eee">

<!--去掉xhtml变为backcompat模式时，body中没有内容，但是实际的clientHeight为可见高，IE，firefox，chrome下都可以响应mousedown事件-->

</body>

三、关于标题问题的例子：

问题：

我遇到一个问题，就是我的html前面如果加上<!doctype html>的话，那么body标签的event都不会有效

比如:

XML/HTML code?
如果去掉那个的话，就会有event响应了。还有去掉这个之后页面上的<input/>标签里的button都变小了一些。这个是为什么？这个<!doctype html>是干什么用的。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

回答：

1、（说明了<!Doctype html>的作用，但是给出的方法无效）

<!Doctype html>是声明文档类型为HTML5类型，它强制要求了浏览器按某种规则去解析网页，所以能一定程度上解决兼容性问题，你之所以加了之后会变小，是因为你没加的时候那个按钮是按IE的规则解析的，加了之后就是按标准解析的，建议你还是按标准来解析，这样会少遇到很多麻烦

至于event失效，可能是兼容性问题，你把function m(event){改成这样:

function m(e){

var evt=e || event;

后面统一用evt就不会有问题了

2、（解决了“事件点击无效”的问题）

css1compat下body没有内容时高为0，所以点击时没有点到body对象就没有触发事件，如果body有内容你点击内容就是点击到body了，触发了事件。不过firefox在css1compat下也响应有点怪，不知道是不是bug。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航