谈网页文档声明对浏览器显示的影响！

最新推荐文章于 2025-08-13 18:53:35 发布

mathewsking

最新推荐文章于 2025-08-13 18:53:35 发布

阅读量1k

点赞数

分类专栏：学习笔记文章标签：文档浏览器 xhtml html ie 框架

学习笔记专栏收录该内容

59 篇文章

订阅专栏

本文解决了一个在IE6和IE7下的浏览器兼容性问题，通过调整DOCTYPE声明实现了菜单样式的一致性显示。

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

原文出处 http://221.130.48.67/post/14.html

最近在移动开发集团客户频道前端页面,遇到了一个浏览器兼容性bug问题。测试发现网页主导航菜单部分在ie6和ie7 下显示效果不一样，具体表现为在ie7下蓝色的子菜单部分向左错位了4px。

上图先（有图有真相）

我们看到在ie6下子菜单显示正常。

在ie7下蓝色部分错位了。

控制菜单显示样式的代码关键部分如下:

这部分代码，正常情况下应解释为，在ie7和ff下，MARGIN值向左移动－51像素，在ie6下向左移动－55像素。然而，浏览器显示的差异表明，浏览器没有按正常情况解释，Hack没有起作用。

这是什么原因导致的呢？

思考… … … …

1小时过去了

2小时过去了

4小时过去了

问题还是没有解决。最后没有办法，求助老大后，得到指示――“检查网页文档声明”

立刻，马上打开编辑器，检查文档头部声明，发现……

果然……

出问题网页的document type 为：“<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">”
改成“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”
奇迹出现了，在ie6和ie7下，菜单均显示正常，问题解决！

细心的同学可能会问，这段声明到底什么意思呢？
我从网上整理了一些资料，共享出来，希望能给大家提供一些帮助。

DOCTYPE 声明

查看很多使用XHTML标准开发的网站，我们会发现第一行就是：

　　 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　打开一些符合标准的站点，例如著名web设计软件开发商 Macromedia ，设计大师 Zeldman 的个人网站，会发现同样的代码。

　　而另一些符合标准的站点的代码则如下：

　　 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　那么这些代码有什么含义？一定要放置吗？

什么是 DOCTYPE

　　上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。

　　其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

　　要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

　　XHTML 1.0 提供了三种DTD声明可供选择：

　　* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：

　　 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：

　　 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：

　　 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

我们选择什么样的 DOCTYPE

　　理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

　　注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。

　　打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。

补充

　　DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。