javascript - 在 FireFox 中将 div 元素定位在左侧和顶部不适用于内容

Question

我有一个带有全屏 Canvas 的网页。在 Canvas 上，我将放置和定位将包含 Canvas UI 元素的 div。我正在使用 jQuery 创建 div 并为它们提供所需的 css 样式。我还会在调整窗口大小时在 JavaScript 中重新定位和/或调整它们的大小。问题是，只要我在 div 中输入一个空格，FireFox 就会说“不!”并且似乎忽略了 JavaScript 所做的任何 css 更改，即使我再次删除了 div 的内容也是如此。

这里是一些技术细节:

我将展示的 div 是一个全屏 div，它覆盖在 Canvas 上并用作暗屏，以防用户打开了对话框，从而使 Canvas 显得更暗，并且将额外的注意力吸引到对话框上。

我使用的 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函数设置width和height属性，用元素的style函数，用setAttribute看是不是某种不兼容造成的；结果没有改变。

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

在构建和测试系统几天后，我不知道是什么导致了这个问题。就像我之前说过的:Chrome 可以正常工作，所以我知道我的代码在技术上是可以工作的，但可能只是需要一种不同的方法才能使其在 FireFox 中工作。我希望有人知道。将不胜感激!

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

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

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

Answer 1

mozilla 知道您的 gameUI.layers 吗？ 您是否尝试过 jQuery 解决方案？

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