2011年10月11日 星期二

css 在 IE 與 chrome 相衝突的寫法

假設, 您有一個 CSS 的設定如下, 在 chrome 的世界裡可以正常顯示:



但, 上面的寫法, 用 IE 來執行卻會跑版, 把該屬性刪掉, 在IE 即可正常顯示:




為了讓2個瀏覽器都ok, 改寫成下面醬子, 就都ok了:



.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設定無效


結論: 要重覆寫2次, 第2次加一個星號給他.

附註: 會衝的到原因超級多, 這個只是茫茫大海裡的一個小小的個案.

相關文章: [CSS Hack]解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題!
http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/

沒有留言:

張貼留言

Facebook 留言板