为了验证 tableless layout 版面的浏览器兼容性，特地找来了时下流行的 Opera 8.5 和 Mozilla Firefox 1.0.7 与 微软的 Internet Explorer 6.0 一起测试，结果是倍受打击……

原来以为基本上不用改就能兼容，因为完全没有用 table 排版，结果在这两个非 IE 的浏览器上，页面虽然没有面目全非，但是也不如在 IE 上显示的完整，而且有些地方莫名奇妙的怎么都设置不正确。花了 4 个小时，经过反复的和 stopdesign 网站样式表的比对，最后发现原因有两点：

·没有用标准的 XHTML 头来声明页面的 DocType，经过测试，发现用传统的 HTML 4.0 声明，和 XHTML 声明，三种浏览器渲染出来的结果都不同；
·Mozilla Firefox 浏览器对样式表的要求非常严格，所有的数字属性，除了 0 以外，都必须带上单位，否则一律忽略不计！为了这个我纳闷了很久——前两个浏览器都能正确的显示各种样式的 border，而 Firefox 上所有的 border 全部都被忽略了，汗哪…… 给 border-width 参数加上单位 px 后，就正确了。padding、margin 具有同样的问题。

以上提到的 XHTML 需要如下声明：


另外，原来几乎所有的 JavaScript 在 Mozilla Firefox 上都不能运行，它对 JavaScript 的语法要求也非常严格，必须完全符合 W3C 标准：

·document.all['id-name'] 不合法，用 document.getElementById('id-name') 替代；
·object.all.tags("DIV") 不合法，用 object.getElementsByTagName("DIV") 替代；
·collObjs(i) 不合法，用 collObjs[i] 替代。

做完以上工作后，终于页面能够在三种浏览器上得到几乎相同的结果了。突然觉得自己做了 5 年的WEB，完全被微软毒害了，已经养成了太多不好的习惯；看来以后要严格执行 W3C 的 XHTML、CSS 和 JavaScript 标准才是。

上一篇: 同一个页面用多个id有什么影响
下一篇: JS事件处理程序的几种写法
文章来自: 今日无大事
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志: