by zhangxinxu from http://www.zhangxinxu.com
寫在前面的嘮叨
說到解決兼容性問題，不得不提一下css hack，曾幾何時我以會使用幾個hack沾沾自喜，后來發(fā)現(xiàn)自己真是個vip級別的蠢蛋，會用幾個hack只是中級階段，真正厲害的人要以沒有hack同樣可以實現(xiàn)復(fù)雜頁面的兼容性，這才叫厲害。所以后來，苦心研究如何無hack實現(xiàn)各個瀏覽器兼容性俱佳，最核心的就是布局方式，宜采用流動性布局，亦稱自適應(yīng)布局，我自己總結(jié)為三無原則：無浮動，無高度，無寬度。神似于武俠里的無招勝有招，忘記招式才是最高境界一樣的道理。好，這個內(nèi)容很大，洋洋灑灑幾萬字都說不盡，作罷。我這里就僅僅講一講一個可能很多人都沒有注意到的瀏覽器之間的差異，并且如何利用這種差異解決瀏覽器之間的兼容性問題，這可是個很妙的東西哦，其精神內(nèi)涵與砒霜治白血病是一致的。
瀏覽器對于含小數(shù)值px（像素）解析的差異
想必很少有人用小數(shù)值作為像素值吧。因為像素就是最小的單位了，要么1，2，3，要么就是0，沒有什么小數(shù)一說的，表現(xiàn)上也不可能存在小數(shù)的。確實，很正確，但今天我就是顆螺絲——鉚上了，我就要用小數(shù)值，怎么樣！好，我們一起來看看結(jié)果。見下面的對比圖：
上面一行是11.9像素大小的文字，下面一行是11.4像素大小的文字，看看各個瀏覽器下都表現(xiàn)得怎么樣：
IE6瀏覽器下（IE下與此表現(xiàn)一致，避免重復(fù)，IE7下圖略）
Firefox瀏覽器下
chrome瀏覽器下（Safari同內(nèi)核，同表現(xiàn)）
下面說正題，想必很多做前端的都知道，中文字體規(guī)規(guī)矩矩顯示的下限像素值就是12像素，小于12像素，中文就會有些擠作一團，美感大降。對比上面的圖，仔細(xì)看，您就會發(fā)現(xiàn)，當(dāng)文字大小11.9像素時，IE6和Firefox等瀏覽器的表現(xiàn)是不一致的。IE6下顯示的是11像素大小的文字效果，而Firefox等w3c標(biāo)準(zhǔn)的瀏覽器則12像素顯示，這就是差異所在，也是本文的關(guān)鍵核心所在。但在12.4像素下，各個瀏覽器表現(xiàn)都是一致的。
經(jīng)過我的反復(fù)適應(yīng)以及項目實踐，證實了這個IE（IE8未測）與其他瀏覽器對于小數(shù)像素的解析差異：IE對小數(shù)像素采取取整的策略，類似于Math.floor屬性，就算你大小為11.999999像素，最后還是顯示11像素文字的大?。ㄒ褱y試）；而Firefox等一些瀏覽器則采取四舍五入的策略，類似于Math.round屬性，11.4像素就表現(xiàn)為11像素，11.5像素就表現(xiàn)為12像素（已測試）。由于平時很少有人用小數(shù)值，所以這種差異很少有人注意，所以很少有人關(guān)注。然而這個不起眼的瀏覽器差異有時候卻是解決一些兼容性問題的絕妙武器。
補充于2010-07-15
IE8瀏覽器下對于小數(shù)的解析與Firefox，Chrome等瀏覽器一致。
利用小數(shù)解析差異解決瀏覽器兼容性問題
好，現(xiàn)在我們需要一個存在的兼容性問題。例如，淘寶首頁css代碼里面有這么一段hack，見下圖（圖對應(yīng)淘寶網(wǎng)首頁上部搜索選項卡樣式）：
淘寶首頁css一段hack
這段hack是個相差1像素的hack，用“*”表示區(qū)分IE和其他瀏覽器。好，大展身手的時候來了！剛在我們就提過驗證過IE和其他瀏覽器對小數(shù)值的解析是有差異的，準(zhǔn)確說是小數(shù)點后大于5的小數(shù)值像素解析是有差異的，而這個差異正好可以解決這里的兼容性問題，于是這個hack就可以一腳踢掉了。直接改成下面的樣式就可以了：
padding:0 11.9px;
不僅僅縮短的代碼的長度，還節(jié)省了一個css hack。首先加載文件小了，其次去掉一個hack，資源消耗少了。不用小看這么一點小小的節(jié)省，這可是淘寶網(wǎng)的首頁，每天的瀏覽量可是相當(dāng)驚人的哦！
附上demo實例頁面驗證結(jié)果圖放大800倍的對比圖，從photoshop上沿標(biāo)尺可以讀出padding值，您可以發(fā)現(xiàn)IE6下11像素，而Firefox瀏覽器下12像素。這與hack達到了同樣的功效，但是代碼卻是沒有hack，更簡短更簡明，更神奇，您不妨也試試！
放大800倍后的padding大小對比圖
狠狠地點擊這里：文本相關(guān)實例頁面
小結(jié)
雖說這個小數(shù)值解決一些兼容性問題很神奇，但是它的缺點也很明顯，就是適用范圍問題，只能解決相差1像素的瀏覽器差異，只能解決IE下值小1像素的瀏覽器差異。
然而，一個技術(shù)其實是次要的，關(guān)鍵是想法，創(chuàng)新的想法，我想這要比單純的會一種技術(shù)更為重要！
