电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 跨浏览器的 web 开发技巧（2） [打印本页]

作者: look_w 时间: 2018-10-7 16:28 标题: 跨浏览器的 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 下显示

解决方案：保留文本中第一次出现的空格，而紧跟空格之后的其余空格均由" "代替。这样 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    are   many      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 浏览器存在的一些差异以及如何针对这些差异进行兼容性处理。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)