1px 边框脱离 SUSY 网格

Question

第一次发帖，请温柔对待我:)

所以我尝试使用 Susy 并排放置两个按钮，这似乎工作正常：

.fifty {
    @include span-columns(3);
    @include nth-omega(2n);
}

但是，一旦我向按钮添加 1px 边框，有效宽度就是 100%+4px，因此会破坏布局。

我正在使用 Compass Vertical Rhythm 插件来处理我的所有按钮填充值，因此不想搞砸。

任何帮助，不胜感激。

Answer 1

这与“How to include padding in column width with Susy”有关，但您的第二个选项有点不同。这个问题不是 Susy 特有的——任何流畅的布局都是如此——但 Compass 和 Susy 可以帮助您解决第一个问题：

1. 使用 box-sizing:border-box; - 现在所有主要浏览器都支持这一点，并且 Compass 有一个方便的 box-sizing() mixin 可以为您处理前缀。如果你在任何地方都使用它（就像我一样），它可以改变 Susy 容器的大小，但是 Susy 提供了方便的 mixin 来为你解决所有这些问题。只需在设置容器之前将其添加到根目录 - 它会设置盒子模型，并让 Susy 知道对其进行调整：

   @include border-box-sizing;
   

   或者只是在你想要的地方使用 Compass box-sizing(border-box) mixin（在这些按钮上）。

2. 由于边框不采用 % 值，因此没有为流体元素添加边框的好方法（使用默认的内容框模型）。如果您不能使用border-box 模型，则唯一的其他选择是在标记中添加一个内部元素，使用外部调整大小，使用内部设置边框和样式。

3. 还有第三种选择 - 使用 calc() - 但更难做到，而且浏览器支持更少......

选项 #1 是迄今为止最好的 - 只要您可以让 IE7 失去乐趣。