JS DOM对象和样式属性

Question

我有两组代码：

var holder = document.createElement('div');

var a = document.createElement('div');
a.style.float = 'left';
a.style.width = '90px';
a.style.height = '90%';
a.style.border = '1px dotted black';

var b = document.createElement('div');
b.style.float = 'left';
b.style.width = '90px';
b.style.height = '90%';
b.style.border = '1px dotted black';

holder.appendChild(a);
holder.appendChild(b);

和

var holder = document.createElement('div');

var a = document.createElement('div');
a.setAttribute('style', 'float:left; width:90px; height: 90%; border: 1px dotted black;');

var b = document.createElement('div');
b.setAttribute('style', 'float:left; width:250px; height: 90%; border: 1px dotted black;');

holder.appendChild(a);
holder.appendChild(b);

第一个例子不能正常工作 - 'b'位于'a'之下。

第二个例子很好 - 'b'位于'a'的右边。

为什么？

Answer 1

这是不准确的：

b.style.float ...

应该是

b.style.cssFloat ... // non-ie
b.style.styleFloat ... // ie

为所有浏览器设置两个属性是安全的;两者都不会打破其他的功能