作者：陆远

标准参考

HTML 代码中元素的某个属性应在其所在元素标签内具备唯一性，如我们不应该为一个元素定义两个同名属性。

关于 HTML 属性的详细信息，请参考 HTML4.01 规范 3.2.2 中的内容。

问题描述

IE6 IE7 IE8(Q) 中会自动合并元素重复的 "style" 属性。

造成的影响

对于 "style" 属性，由于 IE6 IE7 IE8(Q) 中的特有现象，当我们因为比如输入了多个 "style "属性定义元素的内联 CSS 后，会导致与其他浏览器中的 CSS 渲染差异。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

下面代码 DIV 元素的 "id" "name" "title" 属性均定义了两次：

<div id="d" id="div" name="dn" name="divn"
                title="dt" title="divt">123</div>

• 分别使用 document.getElementById("d") 及 document.getElementById("div") 检测，则仅 document.getElementById("d") 返回了该元素的 DOM 对象，而d ocument.getElementById("div") 返回undefined；
• 同样的对于 name 属性，使用 document.getElementById("d").getAttribute("name") 返回的也是前者的属性值；
• title 属性则更明显了，当我们将鼠标移至 DIV 上时，弹出的 "dt" 提示框已经告诉我们前者定义的属性值有效。

以上代码在所有浏览器中表现均一致。

再看一看对于重复定义的class属性：

<style> .dc {font-size:24px;} .divc {text-decoration:underline;} </style> <div
                class="dc" class="divc">123</div>

各浏览器的处理结果相同，DIV 中的文字均变为了24px，且均没有出现下划线。与上一节的结论相同，对于 "class" 属性，仍然是前面先定义的属性值有效。

下面测试 "style" 属性：

<div style="background:#999;" style="background:red; color:#fff; border:1px solid
                black;">123</div>

DIV 元素内含有两个重复的 "style" 属性，第一个中写入 CSS 展现灰色背景黑色文字，第二个则是红色背景白色文字。

在各浏览器中效果如下：

IE6 IE7 IE8(Q)	IE8(S) Firefox Chrome Safari Opera

可以很清楚的看到在 IE6 IE7 IE8(Q) 中，浏览器会将重复的 "style" 属性合并，而对于 "style" 属性中重复的 CSS 样式属性，则采用前面的 "style" 属性定义。

IE8(S) Firefox Chrome Safari Opera 中，则与前面的结论一致，只有第一个 "style" 属性中的 CSS 代码有效。

解决方案

不要依赖 IE 的容错机制，避免重复定义 HTML 元素属性。

参见

知识库

• ...

相关问题

• ...