JavaScript 绝对定位在 IE7 中不起作用

Question

我正在尝试使用绝对定位来定位一个 div，它在 Safari 和 Firefox 中工作正常，但在 IE 中失败，我不明白为什么。代码是这样的:

var tempX=123;
var tempY=456;
var commentnum=3;
var bodyelement = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'comment_text'+commentnum);
newdiv.setAttribute('style', 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;');
newdiv.innerHTML = commenthtml;
bodyelement.appendChild(newdiv);

该脚本假设在用户单击鼠标的位置生成一个 div。但在 IE 中，它将 div 放在左侧，然后将它们堆叠在一起。谁能告诉我为什么这不起作用？

Answer 1

根据quirksmode，setAttribute不能用于在IE中设置style属性。

http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html

Using setAttribute, you should be able to set any attribute on an element. It appears that in IE, trying to set the style attribute does not work.

相反，您可能需要单独设置样式属性:

newdiv.style.textAlign = 'center';
newdiv.style.zIndex = 10001;
newdiv.style.left = (tempX-23) + 'px';
newdiv.style.top = (tempY-80) + 'px';
newdiv.style.position = 'absolute';

---

编辑:

似乎 IE 有一个 cssText 属性。我不确定浏览器是否支持，但也许您可以测试一下。

if( 'cssText' in newdiv.style ) {
    newdiv.style.cssText = 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;';
} else {
    newdiv.setAttribute('style', 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;');
}

在 Chrome 10 和 Firefox 3.6 中测试了 cssText，它可以工作。

---

编辑2:

看起来好像there's wide support对于 elem.style 上的该属性，因此您可能只想使用它而不是 setAttribute()。

newdiv.style.cssText = 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;';