0

看这个例子
下面是代码：
CSS:

div {
   position:fixed;
   top:100px;
   left: 320px;
   border: solid 1px blue;
}

Javascript：

 var i = 1;
 $(document.body).mousemove(function () {
     $("#text").html(i++);
 });

HTML：

<body>
    <div>
      <span>Test Text: </span>
      <span id="text"></span>
    </div>
</body>

此代码仅在鼠标移到主体上时更新跨度。它在 Google chrome 中运行良好，但在 Firefox 中，跨度仅在鼠标移到 div 上时更新，为了调试，我查看了 firebug，发现 body 的高度为 0，所以鼠标实际上并没有在 body 上移动，但是在谷歌浏览器正文中涵盖了整个文档。

所以我的问题是：

  1. 哪个是正确的行为？（chrome或firefox）？

  2. 是否在某处记录了正确的行为？

同样令人惊讶的是，当我在jsfiddle中添加这段代码时，chrome 开始表现得像 firefox，有人能解释一下这种不寻常的行为吗？

编辑：我知道我可以通过添加到正文使代码在两个浏览器中工作height:100%，我想知道为什么浏览器中的这种不同行为和正确的行为。

4

3 回答 3

3

如果添加此 css，您可以看到发生了什么：

body { border: 1px solid red; }

我不完全确定其中的原因，但 Chrome 决定“body”元素应该是窗口的整个高度，而 Firefox 将 body 元素折叠成一行。我相信主体折叠是正确的行为，因为“块”元素（例如<body>or <div>）只应与包含其内容所需的高度一样高（并且由于您将内部 div 设置为绝对定位，因此不会将其纳入计算其高度时考虑）。

正确的修复取决于您的预期结果，但您可以使用documentorwindow代替，document.body因为它们代表整个可视窗口，而不仅仅是实际<body>元素。

您还可以将您的身体设置为特定高度，例如 100%。或者，一旦您将更多内容添加到正文（不是绝对定位的内容），它将“填充”并导致 mousemove 事件正常触发，因此您不需要任何这些修复。

于 2013-01-09T16:24:23.030 回答
2

除了亚历克斯的回答，我仍然对不同的行为感兴趣。我找到了解决方案：在 jsfiddle 中，您不应该在 html 中添加“body”元素。如果您删除它，那么您将获得与独立页面相同的行为。

更新：事实并非如此。真正的原因是单机页面错过了

<!DOCTYPE html>

导致 HTML 版本差异的声明。

于 2013-01-09T17:43:46.937 回答
0

我不知道为什么，但这在Firefox上
也document.body有效。document
$(document.body).mousemove(function () {

于 2013-01-09T16:04:38.000 回答