问向左定位div元素&顶部不处理FireFox中的内容

EN

我有一个全屏画布的网页。在画布上，我将放置和定位div，它将包含画布的UI元素。我使用jQuery创建div，并给他们所需的css样式。我也重新定位和/或调整大小在JavaScript窗口调整大小。问题是，只要我在一个div中输入一个空间，FireFox就会说‘不！’并且似乎忽略了JavaScript所做的任何css更改，即使我再次删除div的内容。

以下是一些技术细节：

我将显示的div是一个全屏幕的div，它覆盖画布，在用户打开对话框时充当暗屏幕，这样画布就会变得更暗，并将额外的注意力吸引到对话框上。

我使用的css是：

.ui_layer {
    position: absolute;
    top:0px;
    left:0px;
}

#ui_layer_dim {
    background-color: #000000;
    opacity: 0.5;
}

在JavaScript中，我有自己的函数来创建div，但是它运行这个jQuery：

$("<div id='ui_layer_dim' class='ui_layer' style='z-index:1'/>");

然后，在onWindowResize (被窗口“调整大小”事件侦听器)上，我更改div的宽度和高度以适应新的窗口大小：

gameUI.layers["ui_layer_dim"].onWindowResize = function() {
    this.css("width", window.innerWidth + "px");
    this.css("height", window.innerHeight + "px");
};

在Chrome中，即使我将内容放在div中，它也能很好地工作。FireFox可以工作，但只有在div处于初始状态时才能工作。div内容的一个变化就是“繁荣”：不再有动态的调整。

我尝试了不同的css位置设置，尝试使用css函数设置宽度和高度属性，使用元素的样式函数，并使用setAttribute查看是否是由于某种不兼容造成的；结果没有改变。

我已经运行了一系列测试，以查看内容一旦放到div中后会发生什么变化，并注意到一些奇怪的事情:检查器和css规则不会显示窗口的innerWidth和innerHeight的宽度和高度的变化。div本身也是如此，但在设置div的宽度和高度之前，我已经设置了一些日志记录，以查看有关窗口的innerWidth和innerHeight的信息，以及设置该div的宽度和高度后的一些日志记录，这实际上显示了正确的维度.

在建立和测试了几天的系统之后，我再也不知道是什么原因导致了这个问题。正如我之前说过的: Chrome的工作原理是它应该的，所以我知道我的代码在技术上是可行的，但可能只是需要一种不同的方法来使它在FireFox中工作。我希望有人知道。我们将非常感谢您的帮助！

编辑:这里有一个修改代码，尝试在FireFox中运行，调整结果的大小，它也应该调整灰div的大小。现在，右键单击结果，转到检查器，在div中放置一些文本甚至一个空格，然后重新调整大小。不是为我工作。链接：http://jsfiddle.net/UsLL6/

编辑2:这是一个截图，希望能解决我遇到的问题。标记为黄色是浏览器宽度的初始状态，我将其设置为非常窄，以便能够更清楚地显示问题。标记为橙色是在我使浏览器变宽一点之后的状态。您可以看到灰色div没有按照它的需要调整大小，检查器值和CSS规则值也没有调整，但是控制台显示了正确的值。第一个(“设置属性：.”)从window.innerWidth检索到第二个(“属性高度现在有.”)使用style.getPropertyValue从div元素的实际宽度属性中检索。

​

刚刚注意到IE给出了和FireFox一样的结果，但是yea..IE.