开发Internet Explorer Mobile 6相关程序手记-优快云博客

本文探讨了在IEMobile6上进行Web前端开发时遇到的兼容性问题，包括不支持绝对定位、动态事件绑定失败、Ajax获取特定类型响应内容为空及大量图片背景元素导致的界面性能下降等问题，并提供了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道Web前端开发，花在兼容浏览器上的工作量不小。

没想到一个网页要兼容IE Mobile 6工作量相当不小。

这里我不得不赞扬一下“Opera Mobile”，性能和PC版兼容性都很好。

我们先来看看IE Mobile 6这个舞台有哪些限制。

1、不支持position:absolute样式

PC效果： Mobile效果：

一些重叠效果就需要重新设计

2、不支持动态赋值事件

<html>
<body>
<input id="idBtn" type="button" value="hello"/>
<script type="text/javascript">
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
}

document.getElementById("idBtn").onclick = function() {
alert("zswang 路过。");
};
//保证赋值了。
alert(document.getElementById("idBtn").onclick);

addEventHandler(document.getElementById("idBtn"), "click", function() {
alert("感谢cctv！");
});
</script>
</body>
</html>

两种方式监听点击事件在Mobile中失败

看来只有用最原始的方法<input type="button" value="hello" onclick="alert('囧');"/>

另外，innerHTML中生成的元素也能通过这方法响应事件

<html>
<body>
<div id="idDiv"></div>
<script type="text/javascript">
document.getElementById("idDiv").innerHTML = "<input type=/"button/" value=/"test/" onclick=/"alert('囧');/"/>";
</script>
</body>
</html>

3、Ajax获得Response.ContentType为"text/plain"的页面时xmlhttp.responseText为空。

解决：.NET ashx文件默认响应类型是"text/plain"需修改为"text/html"

4、界面性能

如果操作具有图片背景的元素过多（40个以上），更新界面会很慢会出现脚本超时的现象，这时候可以先隐藏父容器，更新完样式再恢复显示。

function updateAll () {
$("back").style.display = "none";
for (var i = 0; i < 100; i++)
this.update(i);
$("back").style.display = "";
};

背景样式记得设置no-repeat;

.blank{background:url(/Images/blank.gif) no-repeat ;}

默认为repeat-填充模式，取消填充模式可以降低界面绘制的cpu消耗。