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。不是bug，是一部分 建立响应式网站。

如果您需要精确到像素的网格，Susy 不适合您。这一切 取决于您要构建的内容。

重新调整浏览器的大小，看看它是如何工作的。你会注意到网格 捕捉并浮动在其参考线的几个像素内，但 网格保持不变，永远不会触发水平滚动条。

干杯！

-e

Answer 2

如果我在 Chrome 与 Firefox 中慢慢展开浏览器窗口，则在 Chrome 中的网格和文本跳动比在 Firefox 中更多。看来 Firefox 的布局更精确（这可能会影响渲染速度）。

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

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