Win7+IE8页面兼容性问题解决之DOCTYPE声明

素颜马尾好姑娘i 2022-03-18 02:54 298阅读 0赞

**问题场景：**

在WIN7+IE8下，某区域项目的功能页面出现导航栏和页面排版样式丢失的兼容性问题。

**解决思路：**

1. 上网查相关的兼容性问题触发场景和相关解决方案，基本遇到的是不沾边或不靠谱的三四手技术帖，不足以解决实际问题。

2. “横向”对比其他功能模块的页面，发现有若干没有兼容性问题的页面，通过winMerge对比页面代码差异后，发现，出现兼容性问题的页面均缺少<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，添加上之后即可解决问题。

**总结梳理：**

1. 应梳理和确定网上有哪些地方的技术资源是有效可用一手的。

2. 还是要基于搜索来广泛查询技术解决方案。

3. 类比的重要性，学习和借鉴其他人的做法，大了说就是“站在巨人的肩膀上”做1+0.001的事。

**知识扩展：**

下面给出W3C标准说明：

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。（比如：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）

HTML5 不基于 SGML，所以不需要引用 DTD。(比如：<!DOCTYPE html>)

**提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型，才能解决相关的浏览器版本的兼容性问题。**

**相关演示如下图：**

![20190218223824101.png][]

![20190218223851899.png][]

**H5对于一些浏览器的差异性表现：**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9rZQ_size_16_color_FFFFFF_t_70][]**

**下图为：Win7+IE8下的**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9rZQ_size_16_color_FFFFFF_t_70 1][]**

**下图为：WIN10+Chrome版本 65.0.3325.181（正式版本） （32 位）下的**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9rZQ_size_16_color_FFFFFF_t_70 2][]**

[20190218223824101.png]: /images/20220318/c446ab3efe1541229ce956d94b8ea020.png
[20190218223851899.png]: /images/20220318/a1d69e5dbe914654b75382ed865ab439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9rZQ_size_16_color_FFFFFF_t_70]: /images/20220318/64d066ca69d44a3fa4db70991ad45824.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9rZQ_size_16_color_FFFFFF_t_70 1]: /images/20220318/9377a7656aad4f3c9d9520a3e7f3990c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9rZQ_size_16_color_FFFFFF_t_70 2]: /images/20220318/e94ffc17e1fd4d608090377b5e776af8.png