Question

以下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/。您必须将结果窗格向左扩展，直到矩形不靠近左边缘，然后点击刷新以查看不正确的绘图。如果再次调整窗格大小，将会修复此问题。在这里看起来如何：

好： enter image description here 错误：

导致这种情况的原因是什么？

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

Answer 1

这是因为这两个浏览器呈现输出的方式。

Chrome会在它们准备好运行后立即呈现并运行脚本，事实证明它可以非常快地完成页面仍在加载一些未知资源（jquery已经加载到那里）。当我在浏览器中测试它时，会导致出现奇怪的滚动条（当然会立即消失）。此滚动条更改页面宽度，画布宽度取决于100％样式。这一切都会导致你遇到的错误。

仅供参考：$（文件）.ready既不会工作。

Answer 2

我设法通过在调用getBoundingClientRect之前将画布的高度设置在顶部来解决我的问题。

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

svg在Chrome中具有绝对定位和高度错误的行为

2 个答案: