OOCSS最后一个网格元素到底是如何工作的

Question

因此，在OOCSS上，他们概述了他们的网格版本。我不能确切地理解发生了什么。我知道它应该考虑到导致最后一个元素落到下一行的流畅布局的舍入误差。每条规则对此有何帮助？

我的scss版本的OOCSS最后一个子伪选择器：

.grid__col--last {
    display: table-cell;

    *display: block;
    *zoom: 1;
    float: none;

    _position: relative;
    _left: -3px;
    _margin-right: -3px;

    width: auto;

    &:after {
        content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
        visibility: hidden;
        clear: both;
        height: 0 !important;
        display: block;
        line-height: 0;
    }
}

Answer 1

我已经用特定的描述注释了这些行。

总的来说，它所做的事情是：

1. 解决了子像素舍入错误
2. 创建新的格式化上下文并清除浮动
3. 处理IE6/7错误

.grid__col--last { display:表格单元格；/*创建新的格式化上下文1 * / * display: block；/*保护旧IE不受表格单元格的影响* / *缩放: 1；/*为IE创建新的格式化上下文(通过hasLayout) */ float:无；/*删除普通列上的浮点数*/ _position: relative；/*接下来的三行修复了IE6 3px float错误2 */ _left：-3px；_margin right：-3px；width: auto；/*可变宽度，以便最后一列可以调整为子像素舍入误差&:after { /*此位打开表格单元格，因此它采用全宽度-浮动cols 3 */ content：“...”；可见性:隐藏；清除:两者；高度:0！重要；显示:块；行高度: 0；} }

1. [W3](http://www.w3.org/TR/CSS2/visuren.html#block-formatting)
2. [3px float bug](http://www.positioniseverything.net/explorer/threepxtest.html) 
3. [Stubornella](http://www.stubbornella.org/content/2010/12/09/the-hacktastic-zoom-fix/)

​

但我认为你遗漏了一些东西。为了理解last col，你需要来自.col的基本样式。