css - position relative與display table-cell深入分析

在很多時候，想使用 display: table; 以及其子元素使用 display: table-cell 都只是為了使用 vertical-align 這一屬性。這是一個很簡單的常識，但這次在項目上使用卻產生意想不到的表現方式。

因為我在其中又使用了 position: relative; 這樣一個屬性。同樣是一個很簡單而標准的屬性，我想即使放在一起，肯定也是可以正常工作的。可惜，我錯了。

緣起

就這樣的一個簡單的樣式場景，

Chrome

FireFox

看着兩個圖不一樣，很難受是吧？開始的時候，即用的是 vertical-align: top; 使用 position: relative;去修這樣一個位置。因為icon沒有 padding，而文字卻是有 line-height 的。直接使用vertical-align: top; 是不夠雅觀的，必須往下移大概3個px。我就用position: relative; 去調整了一下(當然，使用 padding-top: 3px;的話，就沒這么多的后話了)。

做為一個開發者，一般說來都會習慣用Chrome或者FF調試自己的樣式。而幸運的是，我用的是Chrome，Chrome對很多東西都支持很好，我用了position: relative; 在Chrome調好了樣式。這就導致了在Chrome上很好的東西，到其他瀏覽器的時候會丑得像一堆X一樣。到FF上的時候，發現這些位置根本不工作。

代碼

客戶的代碼還是就算了，隨便寫個demo代碼吧。

<div class="table">
  <span class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  <div class="cell cell-icon"></div>
</div>

.table {
  border: 1px solid #ccc;
  display: table;
}
.cell {
  padding: 10px;
  border: 1px solid #ccc;
  display: table-cell;
  vertical-align: top;
}
.cell-icon:before {
  content: "icon";
}
.cell-icon {
  position: relative;
  top: 20px;
}

目的只是為了讓 top: 20px; 工作而已，不用去管它現在是否為業務價值。當然，在客戶那里是肯定有價值的。經過測試：

WORK： Chrome | Safari | IE 8+

唯FireFox不行，根本不關心你是否有此(position: relative;)屬性。

過程

遇到這種情況，當然去查找相關資料，最后查到了CSS規范: choose-position。里面有一句:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

大致一意思就是說：position: relative; 在table-cell或者其他table元素下都是不工作的，醒醒吧少年。

實際的情況是：有些瀏覽器又允許用戶在table-cell里使用絕對或者相對定位(在這里可以看到更多詳細信息http://www.w3.org/TR/CSS21/visuren.html#comp-abspos)。但瀏覽器又有權不實現那些開發者想要的規范，畢竟這些都不在W3定義的規范里面。

所以，到這里已經明了了，不是由於FF不給力，而確實是由於規范里面沒有這樣要求，那么剩下的，我們去尋找真正的解決辦法就好了。

解決

1.
以上其實提到過，可以跳過 position: relative;，直接就用 padding-top: 20px; 就好了。但這明顯不能滿足我們的好奇心。所以，請看方法二。

2.
這需要在table-cell里面在包一層，在這層限定這的position就好了。然后，所有瀏覽器測試一遍，搞定。

<div class="table">
  <span class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  <div class="cell">
    <i class="cell-icon"></i>
  </div>
</div>

Demo

或者有人會覺得簡單，我覺得不。這些都只是經驗型的東西，如果此前沒遇到過，或許你會花很長時間去搞明白到底是怎么一回事。這在所有的事情面前都是一樣的。

所以，保持學習，努力填坑。