什麼是 CSS hack？
所謂的「CSS hack」指的就是能夠解決瀏覽器問題的特殊技巧，也就是俗稱的「密技」。
僅管 W3C 制定了標準化的 CSS 和 XHTML 語法，但是，各家瀏覽器的支援程度卻不太一樣，因此衍生出了各種亂七八糟的問題，問題狀況輕的時候可能只是位置偏移了一點點，或是間距大了一點點…. 問題狀況嚴重的時候可能就會讓整個網頁的版面都垮掉了！例如~明明在 Firefox 看到的網頁是好好的，換到 IE6 看的時候就完全壞掉了….這是大家現在都見怪不怪的問題了…唉…
說穿了，「CSS hack」其實是利用該瀏覽器即有的問題所衍生出來的特殊解決辦法，也就是利用問題點來解決問題~ 例如，在 選擇器{} 前面加上 * html 的時候，所有的瀏覽器都會認為這是無效的而忽略這一段語法，但是 IE6 卻偏偏還是會執行這一段語法，因此，以後只要是 IE6 出問題的時候，就可以使用 * html 選擇器{} 來為 IE6 解決問題，而且不會影響到其他的瀏覽器….真是神奇啊！
我們在寫 CSS 語法的時候，能夠避免就儘量避免使用那些會產生問題的語法，遇到問題發生的時候，就把有問題的語法拿掉，換個更保守的寫法就好了。 但是，有時候還是會遇到完全無法解決的狀況，這時候就只能派「CSS hack」「密技」出場啦~ 以下舉一兩個 CSS hack 的例子：
1 2 3 4 5 6 | * html 選擇器{ .... .... .... } /* ====這段語法只有 IE6 能夠讀取==其他瀏覽器會忽略==== */ |
1 2 3 4 5 6 | *:first-child+html 選擇器{ .... .... .... } /* ====這段語法只有 IE7 能夠讀取==其他瀏覽器會忽略==== */ |
同學們對於「CSS hack」的使用需要有一個觀念，使用「CSS hack」實在是萬不得已而為之的方法，儘量先使用 W3C 標準的 CSS 語法來解決問題才是長久之道啊，真的無法解決的時候，再來用上「CSS hack」啊！
CSS hack 相關整理列表
沒有留言:
張貼留言