标题: IE, Opera 和 Mozilla Firefox[兼容]
作者: dnawo
日期: 2008-01-04 09:39 AM
分类: 脚本语言
内容: 为了验证 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 需要如下声明：
复制内容到剪贴板 程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/1">
另外，原来几乎所有的 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 标准才是。
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.031 ms
标题: IE, Opera 和 Mozilla Firefox[兼容]
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.031 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms