logo标签列表

“//W3C//DTD HTML 4.01”和“//W3C//DTD XHTML 1.0”有什么区别？

htmlw3cdtd
3

大家好：

我想获取浏览器的实际高度，但我对W3C DTD HTML 4.01和//W3C//DTC XHTML 1.0有些困惑，以下是我的问题细节：

如果我在页面头部使用W3C DTD HTML 4.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，那么我可以得到浏览器的实际高度：
1. 使用//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有什么区别？
非常感谢您的帮助！

1
如果可以的话，采用HTML5——<!DOCTYPE html>是一个不错的主意。 - Chris Morgan
检索客户端高度和宽度的问题似乎更多是浏览器问题。您使用的是哪个浏览器？ - chris.tian
我们团队希望它能在Chrome、Firefox、IE9+上正常工作，我认为应该有一个通用的解决方案。 - flyingfox
3个回答
2

“//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">

前者将浏览器置于“标准模式”，而后者将其置于“怪异模式”。在怪异模式下，可能会发生奇怪的事情，包括宽度和高度的非标准计算。

除非这是关于依赖怪异模式的旧页面，否则您应该使用“标准模式”并按照规范使用CSS和DOM。

2

HTML 4.01 strict文档类型 i.e "-//W3C//DTD HTML 4.01//"，符合HTML 4.01规范，但不允许使用任何展示标记或弃用元素（如字体元素）或框架集。它验证了松散的HTML样式标记，如最小化的属性和非引用属性（例如required，而不是required="required"）。

HTML 4.01 transitional文档类型 i.e "-//W3C//DTD HTML 4.01 Transitional//EN" 符合HTML 4.01规范。它允许使用一些展示标记和弃用元素（如字体元素），但不允许使用框架集。同样，它验证了松散的HTML样式标记。

这些是我们上面讨论的HTML 4.01 doctype的确切XHTML 1.0等效项i.e. "-//W3C//DTD XHTML 1.0 Transitional//EN" or "-//W3C//DTD XHTML 1.0 Strict//EN"，因此它们在功能上是相同的，只是它们不会验证松散的HTML样式标记：所有内容都需要是良好格式的XML。

1
这里有一个很好的比较这两种文档标准的链接：http://www.w3.org/TR/xhtml1/diffs.html 简而言之：使用XHTML必须遵循XML结构，就像任何其他XML文档一样。HTML4 Transitional更加灵活，允许在标签中使用额外的属性或跳过某些属性。
编辑： - document.documentElement 在IE标准模式下似乎有效 - document.body 在IE怪异模式和我通常使用的所有其他浏览器中均有效。
document.body比另一个更为标准。但它与（X）HTML标准无关。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接