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

为所有浏览器设置这两个属性是安全的；两者都不会破坏对方的功能