2009年11月3日 星期二

Firefox Bug: inline/inline-block的間隙

首先要說明的是,這個標題有點標題黨的意思,這個bug也存在於IE8下,在IE6和IE7下正常。之前寫過兩篇關於IE bug的文章,這里特意用了Firefox bug作為標題,是為了給自己找點心里安慰,省得總是埋怨IE :)。

關於inline-block,這個bug是“痛在遠方”同學碰到的,確實很詭異啊,貌似對標準支持越好的瀏覽器才會有這個問題。

如下圖:




在Firefox下,inline/inline-block的元素直接會有莫名的幾像素(貌似是6px)的空隙。這個bug比較難發現,因為為了美觀,一般的這種設計,inline/inline-block的元素直接都會有一定的間距,再加上目前的瀏覽器對inline-block這個屬性的支持並不是很好,這個屬性應用的也不是很頻繁。由inline-block來看,要對瀏覽器做不少hack,代碼量以及方便性上不如直接使用浮動。因此這個bug的影響其實不大。要解決這個bug,貌似目前沒有什麼好的方法,只能改變代碼的縮進,把換行去掉,整個代碼寫入一行。

文章提供baystars design網頁設計公司