DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> IE8的一個BUG:Hack 兼容方案
IE8的一個BUG:Hack 兼容方案
編輯:CSS進階教程     

字體真是個麻煩的東西,然後又是個重要的東西。為以更方的解決字體問題,就像上次推薦的《再談 Web 默認字體》,為了Pixel Perfect,我們不斷糾結。像支付寶在CSS Reset中是這樣寫的:

  1. body{font:12px Tahoma,Helvetica,Arial,'宋體',sans-serif} 

而淘寶這樣寫:

  1. body, button, input, select, textarea {font:12px/1.5 tahoma,arial,'宋體',sans-serif;} 

個人偏向於淘寶的寫法,顯然,button/input/select/textarea的字體都是要重設才會顯示正常的。這裡並不是為了討論這個,而是這裡面都有 tohama 這種字體,它是今天的主角。因為字體顯示好,也因為導致 BUG 而被搬上台面。讓我們來先看一個Demo:

Here: IE8 Tahoma Font-family bug

如果你是從 IE8 打開,將會看到第一個按鈕有錯位。如標題所說,你懂的,這就是 Tahoma 給我們帶來的問題。而解決方案很簡單,就是避用 tahoma 字體,其他的隨便。比如:

  1. body, button, input, select, textarea {font:12px/1.5 arial,'宋體',sans-serif;} 

在支持沒有那麼完美的狀況下,這樣的解決方式可以說是完美的。即使你像我一樣也有一套 Hack 兼容方案,還是不推薦使用暴力方式,我們的目標是、也應該是更有效、更優雅。

然後,其實 hack IE 8的時候,可以考慮 selector{property:value\0;} 這樣的方法來,因為這是 IE8+ 獨有的方法。Hmmm… 多好,雖然有點暴力。最後,推薦一下鴿子工友。解決這個 Bug,還得歸功於他。

——————————–

經過一條完美分割線從火星來到地球,囧,剛剛還測試了arial放在前面是可以的,而且早上測試過,不過,事實證明測試要更小心,要多次,不然可能刷出來的是緩存。事實的解決方法似乎是這樣的:

  • 有中文和英文混排的時候,怎麼寫都無所謂;
  • 只有中文的時候,放在前面最好的系統所擁有的字體,或者一種系統沒有的字體來讓他顯示默認字體;
  • 全英文就更是所所謂了

多謝幫助尋找真相的 Justice 和 默默同學,一個問到底,一個提供一個非中文的 IE8 顯示效果圖片。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved