HTML/CSS/JS: 兼容经验

来源：互联网发布：霍普金斯知乎编辑：程序博客网时间：2024/06/05 08:21

一. JS

1. 操作 innerText/textContent

FF 支持 textContent; IE 支持 innerText; 可以如下处理解决兼容问题：

setInnerText:function(obj,text){obj.innerText = text;//IEobj.textContent = text;//FF}

2. IE6：释放onreadystatechange事件

最近开始关注循环引用和内存释放问题，在涉及到AJAX时，我刻意在不再需要 ActiveXObject 对象的时候把 o_xhr.onreadystatechange 设置为 null,结果遇到这种问题：

设置为空字符串也还是同样的错误。最终通过 delete o_xhr.onreadystatechange 解决了问题。

以后就按这种模式来处理:

var o_xhr = createXHR();var f_handler = function(){if(o_xhr.readyState == 4){if((o_xhr.status >= 200 && o_xhr.status < 300) || o_xhr.status == 304){//....}delete o_xhr.onreadystatechange;o_xhr = null;}};o_dom.onreadystatechange = f_handler;

3. IE6： onchange 不会冒泡！

不得不承认，哥在兼容方面经验太欠缺了，今天使用 onchange 又出问题。表单 <form> 中有多个 <input> 我对 <form> 添加 onchange 事件，希望当 <input>的值发生改变时能够捕捉到。不过这在 IE6 下失败了。哥很郁闷，后来尝试了直接对 <input> 设置 onchange 事件。嗯，解决了。

4. IE6：图片不缓存

其实很早就注意到IE6刷新页面的时候会闪烁，不过当时正在纠结CSS问题。今天来处理一下，从网络上搜到三种方法：

1）IE6 hack 脚本

if(navigator.appName == "Microsoft Internet Explorer"){    var b_version=navigator.appVersion;    var version=b_version.split(";");    var trim_Version=version[1].replace(/[ ]/g,"");    if(trim_Version=="MSIE6.0"){        alert("IE 6.0");        try {            document.execCommand("BackgroundImageCache", false, fix);        }catch(err){ }    }}

这个我试过了，的确有效，其中：

navigator.appName 是一个只读字符串，表示浏览器的名称。在基于 netscape 的浏览器中，值为 "Netscape"; IE 则为"Microsoft Internet Explorer";

navigator.appVersion 是一个只读字符串，表示浏览器的版本。

在我的 IE6 中返回值：

appName "Microsoft Internet Explorer"

appVersion:

chrome:

appName : "Netscape" 看来是伪装成网景浏览器了

appVersion:

firefox:

appName: "Netscape"

appVersion: "5.0(Windows)"

2) 使用IE6注释hack

<!--[if IE 6]>  <script type="text/javascript"><!--  document.execCommand("BackgroundImageCache", false, true);  // --></script>  <![endif]-->

3) IE6 hack 样式

html {}{ filter:expression(document.execCommand("BackgroundImageCache", false, true)); }

此外，不过，上面这些方法无法解决使用 innerHTML 时访问的图片不被缓存的问题，见链接：http://support.microsoft.com/default.aspx?scid=kb;en-us;319546

5. IE6: 浏览器视口大小

尝试做瀑布流的时候，需要用到浏览器客户区的高度，在IE7以下的版本中，通过document.body.clientHeight获得；其余浏览器通过document.documentElement.clientHeight 获得。

6. ajax 缓存

做瀑布流的时候用到 ajax，发现IE6会自动缓存ajax请求的结果，chrome（chromium16.0.912.75）和 FF(10.0.2)没有自动缓存。(⊙_⊙)给 ajax 请求的 url 打上随机的标签可以解决自动缓存的问题。

7. 设置 dom 自定义属性

可以在 html 中设置例如 <div prop="55" ></div> ，也可以通过 o_div.setAttribute('prop','55') 函数设置 dom 属性，这样做会写入到 dom 。而 o_div.p rop = '55' ; 则不会写入 dom ，它只是给 js 对象添加了属性而已。

8. chrome 通过 innerHTML 动态加载图片无缓存

做瀑布流的时候发现，chrome (chromium 16.0.912.75) 通过设置 InnerHTML 加载的动态图片是无法缓存下来的。现象是，第二次访问这些图片的时候，返回码是 200 而不是 304。在 IE6 和 FF(10.0.2) 中则是 304 。

解决方法：？？

9. 获取scrollTop/scrollLeft

在只支持 IE6+ 的情况下。

document.body.scrollTop + document.documentElement.scrollTop

document.body.scrollLeft + document.documentElement.scrollLeft

10. ie6 提交表单返回 text/plain 类型的文档

我的 html 页面中有个 form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>BUG</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head><body><div><form  method='post' enctype='multipart/form-data' action='http://bug.dollove.com/php/ie6_form_1.php' ><input type='file' name='file' id='file' /><input type='submit' name='submit' id='submit' /></form></div></body></html>

后台的 ie6_form_1.php 文件只有三行:

<?phpheader("Content-Type:text/plain;charset=utf-8");echo "ok";exit();?>

然后就悲剧了，居然要我卸载 notepad

见 http://bug.dollove.com/html/ie6_form_1.html

修改 mime 类型为 text/html , 然后就好了。

见 http://bug.dollove.com/html/ie6_form_2.html

如果是要填充 iframe 的，那还需要输出完整的 html 代码。

二. css

1. IE6: min-height

正确的代码：

height:auto !important;/* IE6 不认识*/min-height:100px;/*IE6不认识*/height:100px;

分析：

1）IE6 无法正确解释 min-height

min-height:100px;/*IE6无法正确解释,FF/CHROME可以*/

2）让IE6做到高度自适应

min-height:100px;/*IE6无法正确解释,FF/CHROME可以*/height:100px;

设置 height:100px; 由于IE6的特性，当内容高度超过100px时，能够自适应。不过，对于FF/CHROME，设置了height:100px;导致高度无法自适应。

3）让其它浏览器恢复高度自适应能力

min-height:100px;/*IE6无法正确解释,FF/CHROME可以*/height:auto !important;/*IE6 无法解析!important,因而略过本样式*/height:100px;

IE6无法解释 !important ，因而，第三句生效，因而，对于IE6而言这三句相当于两句: min-height:100px;height:100px; 根据2）知IE6因此可以高度自适应。

FF/CHROME能够解释!important并把它 height:auto 作为最高优先级的样式，第三句被忽略，从而，对于FF/CHROME 这三句相当于两句 min-height:100px; height:auto;

错误的代码：（对IE6无效）

min-height:100px;/*IE6不认识*/height:100px;height:auto !important;/* IE6 不认识*/

分析：

嗯，今天看了之前的笔记明白了，实际上IE6对!important 是不完全支持，IE6只支持重定义的 !important 。所以，把 height:auto !important 放在后面会导致 height 重新设置为 auto 。所以失效了,oh yeah, 想明白了~

1）不支持 IE6 高度自适应

本来，IE6 认识 height:100px; 所以 CSS 解释到 height:100px; 的时候，已经可以高度自适应了。不过，当IE6试图解释 height: auto !important ; 的时候，height: 100px; 失效。

2）FF/CHROME 没问题

2. IE6 重复字符BUG

在多个浮动元素之间添加注释可能导致浮动元素的最后几个字符重复出现，解决办法就是别在浮动元素之间使用注释，甚至直接不使用注释。

三. HTML

1. <img src=".." alt="下载失败" />

alt 本意是在图片下载失败时才显示在图片位置上的内容。但是，如果不指定title,那么,IE6会把alt的内容当做title的用,即鼠标放到图片上时显示"下载失败"。解决方法就是加个 title 属性。