指定网页doctype解决CSS Hacking

2019-03-14 22:33:12王冬梅


  对于这两种模式之间的差异,最显著的例子涉及Windows上IE专有的框模型。在IE 6出现时,在标准模式中使用正确的框模型,在怪异模式中使用老式的专有框模型。为了维持对IE 5和更低版本的向后兼容性,Opera 7和更高版本也在怪异模式中使用有缺点的IE框模型。

  Mozilla和Safari还有第三种模式,称为“几乎标准的模式(almost standards mode)”,除了在处理表格的方式方面有一些细微的差异之外,这种模式与标准模式相同。
  正是由于这个原因,您可以丢掉很多css hacking技巧了。有些书介绍说,IE6和firefox的盒模型(或者有的地方叫框模型)不一致,因此需要这样做hack:

div{
width:100px;
*width:95px;
}

  我说,这种书真是误人子弟。因为,只要正确指定了doctype,这些浏览器解释上的差异就都不存在了,我们按照标准来就行了。
  这个模式的指位于HTML文件开头的DOCTYPE域指定的。一般常见的有这几种:
HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">