設計講義logo.gif

用css微調網頁位置時

最煩人的就是firefox與IE顯示相容的問題

上網研究一下終於找到究極解決方案

 

IE和Firefox長久以來因為對於某些CSS語法的定義不同,而導致用CSS撰寫時在IE和Firefox顯示效果不同,對設計人員而言要反覆的調整與校對非常花費時間。尤其是IE6和FF之間存在非常大的差異,為了解決這個問題網路上出現一種Hack技術,就是透過只有該瀏覽器可以辨識的字元,來區分在IE6、IE7或是FF下運用某種語法,網路上這類的文章很多,木笛看了又看濃縮整理三種比較常用的Hack方法(至少我會用到的),以下就針對3種特殊的Hack語法來做介紹:

!important   (可辨識:IE7、FF  不可辨識:IE6)

因為IE6無法辨識!important這個語法,所以要區別IE6與其他瀏覽器時就可以使用這個技巧,使用方法就是將不準備在IE6顯示的語法放在前面,並在該語法後面加上!important,講得很難理解直接看原始碼範例

<div style="border:1px ; width:600px;height:500px; "> <div style="border:1px; width:100px;height:100px; margin-left:50px!important; margin-left:25px;"> </div> </div>

當IE6看到第一個描述寬度的語法margin-left:50px!important;因為無法辨識!important就會忽略,而執行下面一段margin-left:25px;的寬度顯示,而IE7與FF可以辨識!important,就會優先使用margin-left:50px的寬度。其實這不算是Hack,他是IE6的bug。

 

\9 (可辨識:IE 不可辨識:FF)

另一個字元組合就是\9,只有IE才能辨識但FF不能,最近剛好遇到背景圖片在IE與FF竟然顯示不一致的問題就以這個範例說明

body { background-image: url(back-unit.gif)\9; background-image: url(back-unit2.gif); background-repeat: repeat-x; background-position: top; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }

如果IE系列的瀏覽器就會使用back-unit.gif當背景,FF無法辨識\9這個字元組合會以back-unit2.gif做背景

 

_ (可辨識:IE6  不可辨識:IE7、FF)

* (可辨識:IE6、IE7  不可辨識:FF)

這兩個字元的放置為是比較特殊,是放在語法的最前面我以上面的例子改寫

body { background-image: url(back-unit2.gif); *background-image: url(back-unit.gif); background-repeat: repeat-x; background-position: top; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }

有沒有注意到除了位置不同以外,語法的先後順序也調換了,因為第一個語法是所有瀏覽器通用的,為了IE瀏覽器能使用back-unit.gif這個背景圖,把有加*的語法放在後面,這樣就符合愈後面能辨識的語法優先顯示的原則。

 

木笛在年前還是堅持不用IE7,仍用IE6來預覽,但隨著Vista的推出以及人們開始無法接受不能開分頁的IE6,慢慢地IE7的佔有率已經打破IE6。根據StatCounter網站最新的瀏覽器市佔率統計,IE7是目前使用最廣泛的版本,就連IE8和FireFox3.5甚至追過了IE6,看來網頁設計的兼容性在不久的將來可以不甩IE6了。(對木笛而言能用IE7為主要流覽的最大好處就是....總算可以大量地使用透明png圖了)

瀏覽器佔有率

資料來源:StatCounter(http://gs.statcounter.com/)

http://gs.statcounter.com/#browser_version-ww-monthly-200810-200911

fennser 發表在 痞客邦 PIXNET 留言(0) 人氣()