說到解決兼容性問題,不得不提一下css hack,曾幾何時我以會使用幾個hack沾沾自喜,后來發現自己真是個vip級別的蠢蛋,會用幾個hack只是中級階段,真正厲害的人要以沒有hack同樣可以實現復雜頁面的兼容性,這才叫厲害。所以后來,苦心研究如何無hack實現各個瀏覽器兼容性俱佳,最核心的就是布局方式,宜采用流動性布局,亦稱自適應布局,我自己總結為三無原則:無浮動,無高度,無寬度。神似于武俠里的無招勝有招,忘記招式才是最高境界一樣的道理。好,這個內容很大,洋洋灑灑幾萬字都說不盡,作罷。我這里就僅僅講一講一個可能很多人都沒有注意到的瀏覽器之間的差異,并且如何利用這種差異解決瀏覽器之間的兼容性問題,這可是個很妙的東西哦,其精神內涵與砒霜治白血病是一致的。
瀏覽器對于含小數值px(像素)解析的差異想必很少有人用小數值作為像素值吧。因為像素就是最小的單位了,要么1,2,3,要么就是0,沒有什么小數一說的,表現上也不可能存在小數的。確實,很正確,但今天我就是顆螺絲——卯上了,我就要用小數值,怎么樣!好,我們一起來看看結果。見下面的對比圖:
上面一行是11.9像素大小的文字,下面一行是11.4像素大小的文字,看看各個瀏覽器下都表現得怎么樣:
IE6瀏覽器下(IE下與此表現一致,避免重復,IE7下圖略)
Firefox瀏覽器下
chrome瀏覽器下(Safari同內核,同表現)
下面說正題,想必很多做前端的都知道,中文字體規規矩矩顯示的下限像素值就是12像素,小于12像素,中文就會有些擠作一團,美感大降。對比上面的圖,仔細看,您就會發現,當文字大小11.9像素時,IE6和Firefox等瀏覽器的表現是不一致的。IE6下顯示的是11像素大小的文字效果,而Firefox等w3c標準的瀏覽器則12像素顯示,這就是差異所在,也是本文的關鍵核心所在。但在12.4像素下,各個瀏覽器表現都是一致的。
經過我的反復適應以及項目實踐,證實了這個IE(IE8未測)與其他瀏覽器對于小數像素的解析差異:IE對小數像素采取取整的策略,類似于Math.floor屬性,就算你大小為11.999999像素,最后還是顯示11像素文字的大小(已測試);而Firefox等一些瀏覽器則采取四舍五入的策略,類似于Math.round屬性,11.4像素就表現為11像素,11.5像素就表現為12像素(已測試)。由于平時很少有人用小數值,所以這種差異很少有人注意,所以很少有人關注。然而這個不起眼的瀏覽器差異有時候卻是解決一些兼容性問題的絕妙武器。
新聞熱點
疑難解答