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

【问题标题】：Positioning div elements left & top not working with content in FireFox将 div 元素定位在左侧和顶部不适用于 FireFox 中的内容
【发布时间】：2014-05-24 02:11:56
【问题描述】：

我有一个带有全屏画布的网页。在画布上，我将放置和定位包含画布 UI 元素的 div。我正在使用 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 内容的一项更改和“BOOM it goes”：不再有动态大小。

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

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

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

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

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

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

【问题讨论】：

请摆弄你的代码。
隔离代码中有问题的部分有时会很有帮助。它可以让您更好地看到错误，并可能意识到它实际上工作正常，因为您已经将它与所有其他代码隔离开来。 Jsfiddle.net 对此很有帮助。
一开始就应该摆弄它！现在正在努力！
刚刚添加了小提琴，不知道是否有编辑通知，所以只是让你知道。谢谢！
我不确定我理解你为什么需要那个空间。如果您创建一个以jsfiddle.net/UsLL6/2 开头的空格的 div，那么当您稍后编辑和调整它的大小时，它似乎对奇怪的行为是防弹的。至少在我的测试中。 |||您应该评论，例如 @ProllyGeek 在评论时 ping 一个人。如果您要评论某人的答案，则不必使用 @ 符号。

标签： javascript jquery css

【解决方案1】：

你的gameUI.layers 是否被 Mozilla 知道？你试过 jQuery 解决方案吗？

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

【讨论】：

我尝试了 jQuery 解决方案：结果相同。我还检查了 gameUI 变量，发现它是未定义的，但代码肯定可以到达它，因为它创建了 div 和所有内容。也许 FireFox 的控制台使用不同的位置来启动代码？我已经尝试将 gameUI 附加到窗口，这使得控制台可以访问它，但问题仍然存在。

【解决方案2】：

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

【讨论】：