1px边框丢掉SUSY网格

Question

第一次发帖所以请轻轻地对待我:)

所以我试图使用Susy并排放置两个按钮,这似乎工作正常:

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

然而,只要我向按钮添加1px边框,有效宽度就是100%+ 4px,因此它会破坏布局.

我正在使用Compass Vertical Rhythm插件来获取我所有的按钮填充值,所以不想搞砸了.

任何帮助,非常感谢.

Answer 1

这与" 如何使用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脱离乐趣.