原来以为基本上不用改就能兼容，因为完全没有用 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 标准才是。
4 comments:
补充一点：对于线条的样式，dotted 和 dashed，在 IE 上 width 为 1 时，都显示为 dashed；但这两个样式在 Opera 和 Firefox 上能够明显的区分出来。
还是IE的开发环境最好，它的最基本功能是浏览器，但是它承载的更多功能是BS结构的客户端。微软对IE开发功能下的功夫远比它的浏览功能多得多。
IE 对 HTML 和 CSS 的理解，包括 JS 在内，相对松散，因此能够让开发人员很容易的达到目的。但是结果，也是让开发成果离 W3C 标准越来越远，兼容性越来越差，可能这个也是微软妄图垄断的阴险所在吧……
经常混迹于Linux下的，会感觉到被微软毒害的IE scripter开发的web应用的痛苦。
难看倒不去说了。关健是没法用。
Post a Comment