大家好:
我想了解web浏览器的高度,但是我对w3c dtd html 4.01和//w3c//dtc xhtml 1.0有些困惑,下面是我的问题细节:
如果我在页眉顶部使用W3CDTDHTML4.01并使用document.body.clientheight,则无法获得浏览器的完整高度:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test jQuery Height</title>
<script type="text/javascript" src="../lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var height=document.body.clientHeight;
alert(height);
})
</script>
</head>
<body>
<div style="margin-left:30px;">
<button>Start Select</button>
<button>Stop Select7lt;/button>
</div>
</body>
</html>
但如果我改为//w3c//dtd html 4.01或使用document.documentelement.clientheight,则可以得到浏览器的实际高度:
一。使用//w3c//dtd html 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test jQuery Height</title>
<script type="text/javascript" src="../lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var height=document.body.clientHeight;
alert(height);
})
</script>
</head>
<body>
<div style="margin-left:30px;">
<button>Start Select</button>
<button>Stop Select7lt;/button>
</div>
</body>
</html>
使用document.documentelement.clientheight
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test jQuery Height</title>
<script type="text/javascript" src="../lib/jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(function(){
var height=document.documentElement.clientHeight;
alert(height);
})
</script>
</head>
<body>
<div style="margin-left:30px;">
<button>Start Select</button>
<button>Stop Select7lt;/button>
</div>
</body>
</html>
所以,我的问题是“/w3c//dtd html 4.01”和“/w3c//dtd xhtml 1.0”之间有什么区别?
任何帮助都将不胜感激!
最佳答案
“/w3c//dtd html 4.01”和“/w3c//dtd xhtml 1.0”的区别在于前者的“html 4.01”与后者的“xhtml 1.0”相反。
您实际观察到的是两个文档类型声明之间的差异
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
和
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
前者将浏览器置于“标准模式”,而后者则将浏览器置于“怪癖模式”。在quirks mode中,可能会发生奇怪的事情。这可能包括宽度和高度的非标准计算。
除非这是一个依赖于quirks模式的遗留页面,否则您应该使用“标准模式”,并按照规范使用css和dom。