IE的不同文本浏览模式页面显示

现象描述:最近在遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面显示错位。

查找过程:经过ie8的F12调试,发现在文本模式中会自动变为 杂项Quirks,而不是变为 标准模式,所以查找相关代码。

结论:<!DOCTYPE >的三种不同格式导致的这个问题。 详细见下面

原来使用的是   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" >

现在改成 <!DOCTYPE HTML > 或者 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

改完之后问题解决。

DOCTYPE可声明三种 DTD 类型:严格版本(Strict)、过渡版本(Transitional )以及框架版本(Frameset)。

Eg:HTML 4.01 、XHTML 1.0

Strict DTD

干净、免于表现层混乱、与层叠样式表(CSS)配合使用:

HTML 4.01 :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0:<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional DTD

包含 W3C 所期望移入样式表的呈现属性和元素,如果使用了不支持层叠样式表(CSS)的浏览器以至于不得不使用 HTML /XHTML的呈现特性时,使用该类型。对于一般开发者而言,若对页面没有特殊的要求且想保持兼容性,使用该类型足以。

HTML 4.01 :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0:<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset DTD

用于带有框架的文档。(HTML 4.01 中除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于Transitional DTD)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML5基本上没有XHTML 1.0 Transitional严格的要求,并且简化了很多东西可以直接使用 <!DOCTYPE HTML>

Html5 :<!DOCTYPE HTML>

相关推荐