将div元素定位为left＆amp;顶部不使用FireFox中的内容

Question

我有一个带全屏画布的网页。在画布上，我将放置并定位将包含画布的UI元素的div。我正在使用jQuery来创建div并为它们提供所需的css样式。我还在窗口重新调整大小时重新定位和/或重新调整它们的大小。问题是，只要我将一个空间输入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上（由一个窗口'resize'eventlistener触发），我改变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内容的一个改变和'BOOM it goes'：不再有动态的大小调整。

我尝试了不同的css位置设置，尝试使用css函数设置width和height属性，使用元素的样式函数并使用setAttribute查看它是否由某种不兼容性引起;结果没有改变。

我已经运行了一系列测试，一看内容放入div后会发现html会发生什么，并注意到一些奇怪的事情：检查器和css规则不会显示窗口宽度和高度的变化innerWidth和innerHeight。 div本身也没有，但我设置了一些日志来查看有关窗口的innerWidth和innerHeight的信息，然后再设置div的宽度和高度，并在设置之后记录div的宽度和高度，这实际上显示了正确的尺寸...

在构建和测试系统几天后，我不再知道可能导致问题的原因。就像我之前说过的那样：Chrome可以正常工作，所以我知道我的代码在技术上有效，但可能只是需要一种不同的方法才能使它在FireFox中运行。我希望有人知道。非常感谢帮助！

编辑：这是代码的小提琴，尝试在FireFox中运行，调整结果大小，它也应该调整灰色div的大小。现在，右键单击结果，转到检查器并在div中放入一些文本甚至空格，然后再次调整大小。不适合我。链接：http://jsfiddle.net/UsLL6/

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

刚刚注意到IE给出了与FireFox相同的结果，但是......是....

Answer 1

你的gameUI.layers是否被mozilla所知？ 您是否尝试过jQuery解决方案？

 $(window).resize(function(){
      $('#ui_layer_dim').width(window.innerWidth);
      $('#ui_layer_dim').height(window.innerHeight);
  });

Answer 2

使用JavaScript在div中添加和删除内容时，它可以正常工作。即使问题不再适用于我，我仍然非常感到困惑的是，在FF检查器中编辑div会产生如此奇怪的结果。