<!Doctype html>对body高度影响_html body style 高度 <!doctype html>-CSDN博客

本文探讨了DOCTYPE声明如何影响浏览器的解析模式，并解释了在css1compat模式下，当body标签内无内容时，不同浏览器对事件响应的差异。特别讨论了Firefox在此情况下的独特行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、关于<!Doctype html>的说明

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

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">
    
    </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">
    
    </script>
</head>

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

</body>

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

问题：

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

 
        <
        script 
        type
        =
        "text/javascript"
        >
       
        <!--
       
        function m(event){ 
       
        x=event.clientX;
       
        y=event.clientY; 
       
        alert("X:"+x+",Y:"+y); 
       
        }
       
        //-->
       
        </
        script
        >
       
        </
        head
        >
       
        <
        body 
        onMousedown
        =
        "m(event)"
        >               
       
        </
        body
        >

如果去掉那个的话，就会有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。。