上集內容“我對CSS vertical-align的一些理解與認識（一）”要追溯到差不多一個月以前了，主要是了解了下vertical-align的一些屬性，并簡單講述了自己對vertical-align屬性的一些理解。vertical-align是個相當復雜與精深的屬性，所理解的一些內容多少會有不準確之處，例如之前我認為inline屬性的元素對vertical-align屬性是不感冒的，但是在同行的提醒下，我自己一測試，發現完全不是之前自己所想的，就算是很單純的inline水平的元素都支持vertical-align屬性的。所以自己有必要對vertical-align的認識重新梳理，整理成文。本集內容主要講講我對在一般情況下vertical-align其作用的理解，以及vertical-align相關的對齊問題，以及浮動為何可以破壞vertical-align屬性。

二、我對不同瀏覽器解析vertical-align屬性的理解

在上集中，在最后提供的實例中，vertical-align:middle實際上應該是與后面的文字是獨立的，毫無關聯，就是說vertical-align無論是什么，都不影響文字在box中的位置（IE6/7對vertical-align理解與現代瀏覽器有差異）。但是在實際情況下，行高可能會小于inline-block或是類似于inline-block屬性的元素的content area的高度，此時vertical-align對文字的影響似乎是顯而易見的，那么這種影響是如果實現的呢？這就是本段的重點。

1. 我對vertical-align文字對齊相關屬性的理解
vertical-align屬性可以說是CSS中兼容性最糟糕的屬性之一了。比如說與文字相關的vertical-align屬性，vertical-align:text-top;和vertical-align:text-bottom屬性，這兩個屬性的解釋IE瀏覽器（IE6-8）和現代瀏覽器是不一樣的兩個派別。到底哪種表現是正確的，這是不能隨便做定論的。無論實現的機制如何，若能實現類似的效果表現，其實都可以說是正確的。在一般的使用條件下，例如小圖標+文字，vertical-align:text-top這類文字對齊類屬性在不同瀏覽器下的差異是較小的，這很難讓我們去思考與理解這些差異在什么地方。但是，如果我們將測試的元素進行簡化與放大，那么差異顯而易見，也更利于我們思考其中的原因所在。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表