宣言DOCTYPE的必要性（转） _Web前端

声明DOCTYPE的必要性（转）

转载：http://www.cnbruce.com/blog/showlog.asp?log_id=871

无论是在BLOG还是论坛，都比较喜欢使用 [ html ]... [ /html ]标签来在线调试一些DHTML相关的内容

关于CSS布局亦不例外，今天调试一项内容时候发现“声明DOCTYPE的必要性”

比如，以下的内容是关于CSS布局居中的

<style> #cnbruce{width:500px; background-color: #ccc; margin: 0 auto} </style> <div id="cnbruce">margin: 0 auto 看看内容居中否</div>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

如上调试结果，IE6.0是不居中的，当然解决的办法可以是对网页主体“<body>”声明文本居中，即

<style> body{text-align:center} #cnbruce{width:500px; background-color: #ccc; margin: 0 auto} </style> <div id="cnbruce">margin: 0 auto 看看内容居中否（加了body文本居中）</div>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

然后，单个div的CSS居中，非要扯上<body>？

于是在不采用“<body>”声明文本居中的情况下，将DOCTYPE声明加上，立马有效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style> #cnbruce{width:500px; background-color: #ccc; margin: 0 auto} </style> <div id="cnbruce">margin: 0 auto 看看内容居中否（加了DOCTYPE声明）</div>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

其实原理都知道，就是因为用这个“懒人”的HTML调试框，懒得去输入些忘却的东西，到头来还以为真相就是如此呢。。。

同样，关于“一边固定，一边自动扩展”的例子，加与不加在IE效果完全不同

如下是不加的情况：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS布局</title> <style type="text/css">  </style> </head> <body> <div id="dv1"> <pre>#dv1 { background-color: #3399FF; float: left; width: 280px; } </pre> </div> <div id="dv2"> <pre>#dv2 { background-color: #FFCC00; width:100%; } </pre> </div> </body> </html>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

如下是添加了DOCTYPE声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS布局1</title> <style type="text/css">  </style> </head> <body> <div id="dv1"> <pre>#dv1 { background-color: #3399FF; float: left; width: 280px; } </pre> </div> <div id="dv2"> <pre>#dv2 { background-color: #FFCC00; width:100%; } </pre> </div> </body> </html>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

下次再也不信HTML调试框了，还是用软件，呵呵。

tag；DOCTYPE\web标准