css - OOCSS 最后一个网格元素是如何工作的

Question

所以在OOCSS上，他们概述了他们的网格版本。我不明白到底发生了什么。我知道它应该解释导致最后一个元素落到下一行的流体布局的舍入误差。每条规则对此有何帮助？

我的 OOCSS last-child 伪选择器的 scss 版本：

.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: table-cell; /* creates a new formatting context [1] */
   
       *display: block; /* protect old IE from table-cell */
       *zoom: 1; /* create a new formatting context for IE (via hasLayout) */
       float: none; /* removing the float which is on a normal column */
   
       _position: relative; /* next three lines fix an IE6 3px float bug [2]  */
       _left: -3px;
       _margin-right: -3px;
   
       width: auto; /* flexible width so the last col can adjust to subpixel rounding errors
   
       &:after { /* all this bit opens the table cell up so it takes full width - floated cols [3] */
           content: "....";
           visibility: hidden;
           clear: both;
           height: 0 !important;
           display: block;
           line-height: 0;
       }
   }
   

   1. W3
   2. 3px 浮动错误
   3. Stubornella

我认为您缺少一些内容。您需要基本样式 from.col才能理解 last col。