首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

跨浏览器的 web 开发技巧(2)

跨浏览器的 web 开发技巧(2)

CSS colorCSS 中有两种颜色表示,十六进制和 RGB 方式。事实上,在 Firefox 下,即使我们给颜色设置了十六进制值,页面的 HTML 仍将用 RGB 方式显示。
十六进制
1
style="COLOR: #FF0000;"




RGB 方式
1
style="color: RGB(255, 0, 0);"




CSS white-spacewhite-space 属性设置如何处理 html 元素内的空白。
表 2.white-space 的属性值值描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。
当运用 pre-wrap,希望空白会被浏览器保留时,Firefox 支持此属性,但 IE 忽略。表现如下:
清单 8.HTML 清单
1
2
3
4
5
6
<body>
<div> this is a white-space test! </div>
<div style="white-space:pre-wrap;width:250px; border:1px solid red;">
there are many white space;
</div>
</body>




图 1. Firefox 下显示图 2. IE 下显示解决方案:保留文本中第一次出现的空格,而紧跟空格之后的其余空格均由"&nbsp;"代替。这样 IE 就能像 Firefox 一样正确显示了。
清单 9.处理之后的 HTML 清单
1
2
3
4
5
6
<body>
<div> this is a white-space test! </div>
<div style="white-space:pre-wrap;width:250px; border:1px solid red;">
there &nbsp;&nbsp;&nbsp;are &nbsp;&nbsp;many &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;white space;
</div>
</body>




BR 问题在 IE 中空段可以用 <p></p> 表示 . 而 Firefox 中 <p></p> 中缺省会加一个 <br>,否则无法显示。同样的 HTML 在 IE 中显示就会多出一个折行。
DOM Events关联事件到 DOM 对象通过 JavaScript 关联事件到 DOM 对象有两种方法 :
第一种,直接给对象(object)添加事件属性。IE 可以直接赋值,Firefox 上则需要使用 attribute 赋值,直接赋值是无法得到 event 的。
清单 10.给对象添加事件属性 -IE
1
domObj.onkeydown = function(){ callFunction( event, param ); };




清单 11.给对象添加事件属性 -Firfox
1
domObj.setAttribute( 'onkeydown', 'callFunction( event, param );' );




第二种,添加 listener 给 DOM 节点。其优势在于,对同一个 event 可以有多个 event listener.
清单 12.给对象添加 listener-IE
1
2
domObj.attachEvent('onkeydown', 'callFunction') ;
domObj.detachEvent('onkeydown', 'callFunction') ;




清单 13.给对象添加 listener-Firefox
1
2
domObj.addEventListener( 'keydown', 'callFunction' ,false);
domObj.removeEventListener( 'keydown', 'callFunction' ,false);




某些事件的差异
  • Drag & Drop 事件                                                IE,Firefox 都支持 drag 和 drop 事件。除了跟 IE 一样支持注册事件到目标和源 element,Firefox 还支持注册 drop 事件到 document,这个事件将会在 drop 事件完成后被调用,而 IE 不支持此注册。
  • 输入法事件                        在 IE 下,输入过程将连续触发 keydown,keyup 事件,其中 keydown 得到的键值总是 229,keyup 事件可以得到正确键值。而在 Firefox 中,输入开始将依次触发 keydown,compositionstart 事件,输入法结束后依次触发 compositionend,keyup 事件,输入过程中不会收到 keydown/keyup 事件。
总结本文详细介绍了在进行 web 开发中,IE 和 Firefox 浏览器存在的一些差异以及如何针对这些差异进行兼容性处理。
返回列表