Monday, October 10, 2005

IE, Opera 和 Mozilla Firefox

为了验证 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 后,就正确了。paddingmargin 具有同样的问题。

以上提到的 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:

Anonymous said...

我最近也在学习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属性,结果我不知道这个路径怎么写才算规范……

可以的话,希望楼主指教啊,万分感激。

Anonymous said...

不太清楚你的 topframe/mainframe 是什么,通常 obj.style.display 可以访问 display 属性,而 document 是 window 的属性,parent 本身就是一个 window 的引用,因此我不确定 parent.topframe.document 这样是否可以访问到你预期的东西。不确定的时候可以用 alert() 函数把你要的东西显示出来查看一下就知道了。

需要 JavaScript 的参考,一方面可以查 MSDN / W3C 等网站的规范,另一方面可以 google 一些例子。

cara menggugurkan hamil said...

now present in your city

cara menggugurkan kandungan said...

cool, please guidance so that I can create a blog like yours