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;
   

   或者只需使用指南针box-sizing(border-box) mixin（在这些按钮上）。

2. 由于边框不占用％值，因此根本没有向流体元素添加边框的好方法（使用默认的内容框模型）。如果你不能使用border-box模型，唯一的另一个选择是在标记中添加一个内部元素，使用外部调整大小，使用内部边框和样式。

3. 还有第三个选项 - 使用calc() - 但它更难做，并且浏览器支持更少......

选项＃1是目前为止最好的 - 只要你可以让IE7脱离乐趣。