說到解決兼容性問題，不得不提一下css hack，曾幾何時我以會使用幾個hack沾沾自喜，后來發(fā)現(xiàn)自己真是個vip級別的蠢蛋，會用幾個hack只是中級階段，真正厲害的人要以沒有hack同樣可以實(shí)現(xiàn)復(fù)雜頁面的兼容性，這才叫厲害。所以后來，苦心研究如何無hack實(shí)現(xiàn)各個瀏覽器兼容性俱佳，最核心的就是布局方式，宜采用流動性布局，亦稱自適應(yīng)布局，我自己總結(jié)為三無原則：無浮動，無高度，無寬度。神似于武俠里的無招勝有招，忘記招式才是最高境界一樣的道理。好，這個內(nèi)容很大，洋洋灑灑幾萬字都說不盡，作罷。我這里就僅僅講一講一個可能很多人都沒有注意到的瀏覽器之間的差異，并且如何利用這種差異解決瀏覽器之間的兼容性問題，這可是個很妙的東西哦，其精神內(nèi)涵與砒霜治白血病是一致的。

想必很少有人用小數(shù)值作為像素值吧。因?yàn)橄袼鼐褪亲钚〉膯挝涣耍?，2，3，要么就是0，沒有什么小數(shù)一說的，表現(xiàn)上也不可能存在小數(shù)的。確實(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像素，中文就會有些擠作一團(tuán)，美感大降。對比上面的圖，仔細(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)以及項(xiàng)目實(shí)踐，證實(shí)了這個IE（IE8未測）與其他瀏覽器對于小數(shù)像素的解析差異：IE對小數(shù)像素采取取整的策略，類似于Math.floor屬性，就算你大小為11.999999像素，最后還是顯示11像素文字的大小（已測試）；而Firefox等一些瀏覽器則采取四舍五入的策略，類似于Math.round屬性，11.4像素就表現(xiàn)為11像素，11.5像素就表現(xiàn)為12像素（已測試）。由于平時很少有人用小數(shù)值，所以這種差異很少有人注意，所以很少有人關(guān)注。然而這個不起眼的瀏覽器差異有時候卻是解決一些兼容性問題的絕妙武器。

補(bǔ)充于2010-07-15
IE8瀏覽器下對于小數(shù)的解析與Firefox，Chrome等瀏覽器一致。

好，現(xiàn)在我們需要一個存在的兼容性問題。例如，淘寶首頁css代碼里面有這么一段hack，見下圖（圖對應(yīng)淘寶網(wǎng)首頁上部搜索選項(xiàng)卡樣式）：

淘寶首頁css一段hack

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表