原来以为基本上不用改就能兼容，因为完全没有用 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">
对于线条的样式，dotted 和 dashed，在 IE 上 width 为 1 时，都显示为 dashed；但这两个样式在 Opera 和 Firefox 上能够明显的区分出来。另外，原来几乎所有的 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:
我最近也在学习WEB2.0的技术，只是偶是个纯美工，对div+css的架构设计倒是没什么问题，就是碰到需要用javascript做交互效果的时候就蒙了，IE里好使的在FF里一概无用。唉，偶是个javascript盲啊，眼下想解决个估计懂程序的人都会认为很菜的问题：
function tsk()
{
if( parent.topframe.document.getElementById('masktop').style.display != "none")
{
parent.mainframe.document.getElementById('tsxx1').style.display = "none";
}
else
{
parent.mainframe.document.getElementById('tsxx1').style.display = "block";
}
}
我要的效果就是想通过onclick触发这个函数后，改变mainframe这个框架里的id为tsxx1这个DIV的display属性，结果我不知道这个路径怎么写才算规范……
可以的话，希望楼主指教啊，万分感激。
不太清楚你的 topframe/mainframe 是什么，通常 obj.style.display 可以访问 display 属性，而 document 是 window 的属性，parent 本身就是一个 window 的引用，因此我不确定 parent.topframe.document 这样是否可以访问到你预期的东西。不确定的时候可以用 alert() 函数把你要的东西显示出来查看一下就知道了。
需要 JavaScript 的参考，一方面可以查 MSDN / W3C 等网站的规范，另一方面可以 google 一些例子。
now present in your city
cool, please guidance so that I can create a blog like yours
Post a Comment