ie7的网页做向上兼容时遇到的问题记录

文章目录

对用js创建的dom对象添加自定义属性
对部分css样式（带有长度的）的添加
childNodes

测试所用的浏览器：ie7，Google Chrome 69.0.3497.100 (正式版本) （64 位）

对用js创建的dom对象添加自定义属性

ie7中可以直接用.属性 的方式添加，但是在谷歌浏览器中会出现添加不上的bug。

	var ddm = document.createElement("TR");
	ddm.asd = "aaa";
	alert(ddm.outerHTML);

ie7输出<tr asd="aaa"></tr>
谷歌输出<tr></tr>

值得注意的是，在谷歌中直接alert(ddm.asd)是可以弹出aaa的，但是它并不会被识别为dom元素的自定义属性。在高版本浏览器中，只有那些内置的属性可以用这种语法添加，比如ddm.id="aaa"这种是可以的。

兼容的方法很简单，可以用setAttribute方法来添加自定义属性。

	var ddm = document.createElement("TR");
	//ddm.asd = "aaa";
	ddm.setAttribute("asd", "aaa");
	console.log(ddm.outerHTML);

对部分css样式（带有长度的）的添加

ie7中，所添加的长度可以忽略单位，浏览器会自动为其加上px。

	var ddm = document.createElement("TR");
	ddm.style.width = 345;
	alert(ddm.outerHTML);

但是在谷歌中，这会导致样式添加失败。必须指定单位。

	var ddm = document.createElement("TR");
	ddm.style.width = "345px";
	alert(ddm.outerHTML);

childNodes

ie7中，childNodes经常会想你做想的那样工作，但是在谷歌中，“空白”文本会扰乱你的结果。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /></script>
    <title>test</title>
    <style type="text/css">

    </style>	
</head>
<body>

<table>
	<thead></thead>
	<tbody id="tbby"> 
		<tr></tr>
	</tbody>
</table>
		
</body>
</html>

<script type="text/javascript">
	alert(document.getElementById("tbby").childNodes.length);
</script>

ie7中会返回1，但是高版本浏览器中可能会返回3 ，因为tr与tbody之间的空白也会被识别为节点。如果非要用childNodes的话，可以讲html改成这样

<table>
	<thead></thead>
	<tbody id="tbby"><tr></tr></tbody>
</table>

非常不建议这样修改，先不说可读性的问题，对于一些复杂的页面，尤其是通过复杂规则与代码动态生成的html，这根本做不到！建议直接用jQuery来改吧。列出几种常见的例子。

对于这样的html

<table>
	<thead></thead>
	<tbody id="tbby">
		<tr></tr>
	</tbody>
</table>

var temp = document.getElementById("tbby").childNodes; 改为 var temp = jQuery("#tbby").find("tr").get();

var temp = document.getElementById("tbby").childNodes.length; 改为 var temp = jQuery("#tbby").find("tr").length;