去 XML 头指引

项目的页面加了xml头,即

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

所带来的后果是把IE6带入了怪异模式,除了盒模型的不同、命名大小写不敏感之外,还会多出一些IE怪异模式专有的BUG。优点也有,就是可以用IE8或IE9来直接调试IE6,虽然和真实的IE6有些差别,大部分情况够用了。

不过后来又面临两个项目合并,另一个DTD是

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

给一些组件的重用带来了很大的麻烦。

中间经历过一些做法:

  • 新需求做到标准、怪异模式全兼容(很容易,偶尔需要多套一层单独用来做border及padding,不爽的是IE6怪异模式独有的小BUG)
  • 重用的组件css各自独立,从其中一个项目考取css代码,适当调整后放到另一个项目的css中(维护起来麻烦,一次改动要改多处css)

随后对去除xml头进行了一些实践,比想象中简单许多,以后可参照此步骤进行:

1.找到当前页面所调用的css,复制一份并重新命名,比如 page.css → page.noxml.css
2.搜索源文件中的关键字 width,将其删除或进行调整注:并不是所有的都删除,只对同时写有 widthwidth 的进行删除,例如: selector { width: 380px; _width: 400px; }

删除后为

selector { width: 380px; }  

若只有 _width ,则不处理,例如:

selector { _width: 380px; overflow: hidden; }  

若有 min-width,则调整 _width 的值与其相等,例如:

selector { min-width: 380px; _width: 400px; }  

改为

selector { min-width: 380px; _width: 380px; }  

3.依照上述方法对 _height 进行调整
4.自测,用fiddler代理之,大概看下有其他异常,并fix之(偶尔会有几个小BUG,但遇到的情况不多)
5.拜托测试多测试一下IE6下的表现并提BUG单(嗯嗯,至今没提过)