0

下面的 HTML 文件会在 Chrome 中产生一些特殊的东西，具体取决于该行$("#canvas").height(100);是否被注释。

<!DOCTYPE html>
<html>
    <body>
        <div style="margin-right: auto; margin-left: auto; width: 940px;">
            <div><h1>Title</h1></div>
            <div style="height: 50px;"></div>
            <svg id="canvas" style="width: 100%; position: absolute; left: 0px; z-index: -1;">
                <rect id="rect" x="0" y="0" width="100" height="100" fill="none" stroke-width="1" stroke="black"/>
            </svg>
            <div id="div1">Hi</div>
            <div id="div2"></div>
        </div>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            function move() {
                var left = $("#div1")[0].getBoundingClientRect().left;
                $("#div2").text('left = ' + (left - 5));
                $("#rect").attr("x", left - 5);
                $("#canvas").height(100);
            }

            move();

            $(window).resize(function() {
                move();
            });
        </script>
    </body>
</html>

在最大化的 Chrome 窗口中加载页面时，根据分辨率，div 的文本变为left = N. 事实证明，这个值N被关闭了 7。这可以通过调整窗口大小使其不被最大化然后再次最大化来看到。

$("#canvas").height(100);当该行被注释掉时，这种奇怪的行为不会出现。您可以在这个 jsfiddle 中见证这一点：http: //jsfiddle.net/jvPCM/1/。您必须将结果窗格向左扩大，直到矩形不靠近左边缘，然后点击刷新以查看不正确的绘图。如果您再次调整窗格大小，它将被修复。它的外观如下：

好：在此处输入图像描述坏：在此处输入图像描述

什么会导致这种情况？

仅供参考：这不会出现在 Firefox 中（具有讽刺意味的是，它首先需要设置高度）。

4

2 回答 2

1

发生这种情况是因为这两个浏览器呈现输出的方式。

Chrome 会在脚本准备好运行后立即渲染并运行脚本，结果证明页面仍然在加载一些未知资源（jquery 已经加载在那里），它的速度非常快。当我在浏览器中对其进行测试时，这会导致出现奇怪的滚动条（当然会立即消失）。这个滚动条改变了页面宽度，画布宽度取决于它的 100% 样式。这整件事导致了你遇到的错误。

仅供参考： $(document).ready 也不起作用。

于 2013-04-07T20:17:04.667 回答
0

在调用getBoundingClientRect.

仍然不确定为什么它会报告不同的值。

于 2013-04-07T20:03:30.197 回答