svg與Chrome中的絕對定位和高度不當行爲

以下HTML文件會產生Chrome中特有的內容，具體取決於是否註釋了$("#canvas").height(100);這一行。svg與Chrome中的絕對定位和高度不當行爲

<!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 壞：