2010年11月13日 星期六

[CSS Hack] Google chrome CSS hack 快速修正所有瀏覽器技巧

從上一次壞掉的印表機用一個class的css hack搞定所有瀏覽器之後,這次問題又來了,這次遇到了Googl chrome瀏覽器跟其他瀏覽器的畫面有所差異,懶得改架構,那就再來用css hack解決吧,查遍網路上面的文章都沒有用一個class搞定的,這可真是棘手,早期壞掉的印表機用兩個class來設定的作法,不管是在檔案大小上面,或者是css的維護上面都非常的不方便,再怎麼樣都盡量用一個class的css hack技巧來修正,我想這會是比較好又快速的作法,現在就來看看怎麼設定吧~
.className {

font-size:12px; \*這一行所有瀏覽器都看得懂,所以是給Firefox套用的*\
font-size:14px\9; \*這一行則是所有的ie都看得懂*\
[;font-size:16px;] \*這一行專門給Chrome跟Safari用,不過IE6跟7也看得懂喔*\
*font-size:18px; \*這一行給ie7*\
_font-size:20px; \*這一行給ie6*\
}
上面的設定中,壞掉的印表機提醒各位要注意到順序的問題,給Google Chrome跟Apple Safari使用的css hack一定要寫在ie8的設定後面,若是沒有依照此種順序,將會造成後續ie6與ie7的css hack設定無效,切記切記阿~此文章由壞掉的印表機-設計、生活、態度發表
此外~倘若許多的css設定中,只有ie8需要修正的話,也可以利用ie8才看的懂的css hack來解決,這樣可以省下至少兩行的css設定。以下設定是只有ie8會看的懂,其他版本的ie或其他家的瀏覽器都看不懂
font-size:14px\0;   \*這一行只有ie8看得懂*\
雖然有許多人對於 css hack 是厭惡到了極點,但是就實務上面來說,壞掉的印表機認為,畢竟瀏覽器的缺點不是我們能控制的,標準的制定也是看各家瀏覽器要不要遵守,如果估計沒有錯的話,所有的瀏覽器勢必演化到最後,必然是都會盡量符合網頁標準的,所以在一個專案的經費與時間都有壓力的情況下,快速的利用css hack來解決個瀏覽器之間的問題,我想是符合經濟效益的,此外,以正規的作法與觀念來說,盡量少用css hack是正確的,但是倘若為了少用css hack而增加div的層次或多餘的原始碼的話,我想這樣的網頁設計不見得會比較好阿~
祝各位使用愉快啦~此文章由壞掉的印表機-設計、生活、態度發表

[技巧]微軟正黑體的BUG

今天非常不小心的發現到,微軟正黑體的某些字體只要設定為粗體字,不管是採用CSS設定粗體或是用HTML的STRONG標籤設定為粗體,就會出現下面這種狀況

image

就是這麼奇怪,碧字的右邊竟然多出了一個字寬!!且這種狀況只會出現在字體設定為粗體情況下

於是思考最簡單的解決之道就是不要將字體設定使用"微軟正黑體",或者是不要使用粗體設定,可是假如我想要網頁採用的是像微軟正黑體這樣的黑體字並加粗的話該怎麼辦? 按照理論來看,我們可以將字體設定成sans-serif這種無襯線字體,讓系統自動去抓取預設的無襯線字體才對,但是設定後,沒想到系統卻是抓新細明體來用,變成下面這樣

image 

這是甚麼狀況阿!?!?!?! 微軟竟然連自家的無襯線的中文字都不會抓?! 會不會太遜了阿!!! 於是再改成使用Arial字體看看,結果依舊沒有改善,最後面只好以殘念收場,放棄使用粗體或放棄使用微軟正黑體,等到有新的解決方案再來使用吧~

就目前利用假文產生器所產生的假文來測試,只發現碧這個字有出現這種情況,其他文字還尚未發現到,恩~這種情況大概就只能說是我太帶賽了~偏偏遇上了~哈,下次如果還有這樣不小心的狀況,就能知道問題點了