詳解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代碼吧。

 

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.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就好了。然後，所有瀏覽器測試一遍，搞定。

 

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 

 

 

 

 

 

Demo

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

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