Susy：在根上下文中定位元素

Question

这是我第一次使用Susy。我非常喜欢我在文档/教程中看到的内容，但是我在第一次布局尝试中遇到了一些意想不到的结果。

版本信息：

>gem install compass-susy-plugin
Successfully installed sass-3.1.2
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.1
Successfully installed compass-susy-plugin-0.9

>ruby --version
ruby 1.9.2p136 (2010-12-25 revision 30365) [x86_64-darwin10.5.0]

下图显示了我使用tutorial html和screen.scss逐字获取的结果：

如您所见，检查h1元素显示它刚好位于网格之外。这是正常的吗？

Answer 1

请参阅我对another similar question的评论：

  

Susy不仅仅是与其他网格系统一样的另一个网格系统。它是   旨在实现一个非常特定的目的：fluid on the inside的网格。用于创建网格的单位将应用于   容器，而不是每列。里面的一切都是建立在   百分比。你所看到的是正常的。所有液体都是如此   网格，因为sub-pixel rounding。这不是一个错误，它是一个部分   建立响应式网站。

     

如果您需要像素精确网格，Susy是您的错误工具。这一切   取决于你想要建立什么。

     

重新调整浏览器的大小以查看其工作原理。你会注意到网格   在他们的向导的几个像素内捕捉和漂浮，但是   网格保持不变，永远不会触发水平滚动条。

干杯！

-e

Answer 2

如果我在Chrome与Firefox中慢慢扩展浏览器窗口，Chrome和Chrome中的网格和文字会比Chrome更多。看起来Firefox的布局更精确（这可能会导致渲染速度下降）。

在Firefox中，当我调整大小时，所有内容总是完美排列并一起移动 - 文本区域和网格。在Chrome中，当我调整大小时，我可以看到页脚文本在文章文本与网格对等​​的不同时间移动。

这是一个示例，其中Chrome中的文字和网格偏离了相当多的像素：