IE7,IE8与IE6兼容路上的痛苦

来源：互联网发布：临高启明实体书淘宝编辑：程序博客网时间：2024/05/16 09:08

首先必须说的是IE6真得很垃圾，存在太多让人意想不到的bug，但是他主流所以没办法。

1. 首先是position：fixed属性，在ie6中没有这个属性，所以需要在ie6中实现可以有2种方式：

a. js方式实现，这样的好处不会影响其他元素，缺点会有dom移动的痕迹，毕竟是监听滚轮移动不是实时触发的。

实现过程：例如现在想让dom时刻现实在窗口底端，那么需要监听滚轮移动实时修改dom的top值。

dom设置成position=absolute。

具体代码：

b. css方式实现，这样会需要修改body和 html的属性，有可能造成整个页面的css混乱。

实现过程：

html{overflow:hidden;}body{height:100%;overflow:auto;}修改html属性，让html的现实完全等于body，再让body高度100%，然后设置需要fixed的dom的position=absolute。这样dom会随body的高度变化而变化。

具体代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IE6 position:fixed bug</title><style>* {padding:0;margin:0;}#rightform {text-align:center;padding:50px;font:14px/22px Georgia, "Times New Roman", Times, serif;height:1200px;background:#ffc;}#rightform h1 {font-family:arial;background:#e8edef;height:300px;line-height:300px;margin-bottom:200px;}#rightform p {line-height:1.5em;background:#ffdfff;padding:90px 0;}#rightform form {background-color:#ddd;padding:10px 20px;border:1px solid #aaa;position:fixed;right:30px;top:120px;}</style><!--[if IE 6]><style type="text/css">html{overflow:hidden;}body{height:100%;overflow:auto;}#rightform form{position:absolute;}</style><![endif]--></head><body><div id="rightform">  <h1>  <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>  </h2>  <p>position:fixed; vs position:absolute;<br />    Created by <a href="http://blog.happinesz.cn/" title="sofish">sofish</a> from <a href="http://www.happinesz.cn/" title="blog">幸福收藏夹</a></p>  <form id="g_search" method="get" action="#">    <input id="g_s" name="g_s" type="text" value=""  />    <input id="g_submit" name="g_submit" type="button" value="search" />  </form></div></body></html>

2. <a href=’javascritp:void(0)’/>. 当希望点击超链接的时候，a标签不跳转很多人使用javascritp:void(0)这样的函数，但是ie6偏偏不支持，所以应该换成<a href=’#’>;

3. ie6又一大恶行，css继承关系与ie7，ie8不一样，具体的bug发生的时候需要用firebug解决，分析css继承结构。

4. 又是一大恶行，ie6的select标签。ie6不识别select的z-index，所以当有select的时候会越在所有的div之上。解决方法是把 select用iframe包裹现实，实用工具包：bgiframe_2.1.1.zip

5. ie6是没有trim()函数的，如果要实现trim的功能可以借助var str=“ zhang ”;

str = str.replace(/^\s\s*/, ’’).replace(/\s\s*$/, ’’);

6. ie和firefox的区别 onchange事件：在ie中若页面加载后鼠标聚焦在input元素上，填写内容后input 元素失去焦点，这个时候是不会触发onchange事件的，但在firefox中是会触发onchange的事件的。若要实现input元素内容一改变就触发的事件需要使用onpropertychange事件。

7. Ie6的url下载是中文的话，最后一个字符游览器不识别，解决方法：

将A标签的属性拿出来封装成FORM提交。

HTML：

< a href = ’./servlet/MyServlet?name=世界&id=1’ onclick = "return linkClick(this)" > click me </ a > < br >