我正在http://blog.benjohnsmith.com/绘制一个自适应网站，其中画布上的大多数元素都是通过JavaScript重新调整大小的。
当窗口宽度超过1160像素时，我看到一些元素的位置不一致。在Windows 8上运行的所有当前版本的Opera，IE，Firefox，Chrome，Safari中，只有大约一个像素的差异。在Mac OSX上运行的Chrome，Firefox和Safari上有很大的优势（与Windows 8上的浏览器相比）。我无法追查不一致的来源。
有问题的元素（index.php的源代码）：
<canvas id="hero-left-overflow" height="510px" width="1px"></canvas>
<canvas id="post-right-overflow" height="720px" width="1px"></canvas>
以及
<canvas id="footer-left-overflow" height="140px" width="1"></canvas>
画布元素在http://blog.benjohnsmith.com/index_create-overlays.js
中绘制它们在/index_after-actions.js
中重新调整大小它们在/index_style.css
中设置样式（定位）（由于声誉而无法发布超过2个链接
我的目标是在每个浏览器中对齐这些元素的位置。每个浏览器创建特殊情况代码并不理想，我想知道是否有办法更干净地做到这一点。