Question

我已将以下javascript代码发布为 fiddle 。这是非常基本的，并且在IE11和Chrome中运行良好，但FireFox会悄然抛弃我的float设置。当我使用FireBug检查元素时，它们都没有设置float样式。

为什么？

网上冲浪，我得到了一个模糊的印象，它与width需要设置某个地方有关，但在哪里？如果那就是问题，那么我有办法在不知道容器宽度的情况下在Firefox中执行此操作吗？

var titleElem = document.createElement("div");
    titleElem.innerHTML = "Testing";
    titleElem.setAttribute("unselectable", "on");
    titleElem.style.border = "0px transparent";
    titleElem.style.width = "auto";
    titleElem.style.float = "left";
    titleElem.style.whiteSpace = "nowrap";
    titleElem.style.overflow = "hidden";
    titleElem.style.position = "relative";

document.body.appendChild(titleElem);

    rangeElem = document.createElement("div");
    rangeElem.setAttribute("unselectable", "on");
    rangeElem.style.width = "auto";
    rangeElem.style.border = "0px transparent";
    rangeElem.style.float = "right";
    rangeElem.style.whiteSpace = "nowrap";
    rangeElem.style.overflow = "hidden";
    rangeElem.style.position = "relative";
    rangeElem.style.fontSize = "x-small";
    rangeElem.style.paddingRight = "5px";
    rangeElem.className = "rangeDiv";
    rangeElem.innerHTML = "<i>[1234 - 5678]</i>";

document.body.appendChild(rangeElem);

Answer 1

尝试将该行更改为

titleElem.style.setProperty('float', 'left')

或者，

rangeElem.style.cssFloat = 'left'

也有效。

Answer 2

您使用.cssFloat来访问该样式属性。

titleElem.style.cssFloat = "left";

显然，这与float是javascript中的保留字有关。

在Firefox中无法设置element.style.float？

2 个答案: