判斷何種瀏覽器後使用不同的CSS檔案

javascript css jquery

hahahacja 2010-04-21 16:09:57 ‧ 18456 瀏覽

您好
我想在網頁上先判斷何種瀏覽器(EX: IE FIREFOX...)後,再呼叫不同的CSS,
ex: IE 使用IE.css , FIREFOX使用 FIREFOX.css
我是用 if(navigator.userAgent.indexOf("MSIE")>0) 來判斷 ,
請問如何呼叫 CSS檔案?
請問JQuery 如何判斷何種瀏覽器及呼叫 CSS檔案?
謝謝!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

wordsmith

iT邦高手 1 級 ‧ 2010-04-22 14:45:29

最佳解答

一般而言，IE和其他瀏覽器在CSS的呈現上比較不一樣，因此只要針對IE去做css的設定就好了。

針對IE CSS的寫法，雖然各種css hack可以參考，不過最好的做法還是用條件式的CSS，例如

&lt;pre class="c" name="code">    &lt;!--[if lt IE 8]>
     &lt;link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" />
    &lt;![endif]-->

上面的寫法，IE 8以下的瀏覽器就會去讀這個CSS，其他的瀏覽器和IE 8就不會。

條件式的寫法有很多，這裡有篇文章整理很多資訊，可以參考一下。

利用JavaScript或是jQuery去判別瀏覽器，再讀入不同版本CSS，除非有什麼特殊的應用方式，不然好像有點殺雞用牛刀的感覺。

回應 1
分享
檢舉

hahahacja iT邦新手 5 級 ‧ 2010-04-24 22:07:46 檢舉

您好
我是用一純CSS來做選單,當A:hover時會換底圖,在IE ok , 在FIREFOX不ok ,
想直接判斷瀏覽器來直接使用指定的css
您能教我用JavaScript或是jQuery 判別瀏覽器，再讀入不同版本CSS?
謝謝!

&lt;pre class="c" name="code">&lt;link rel="stylesheet" type="text/css" href="../css/css_oth.css" />
    &lt;!--[if IE]>
    &lt;link rel="stylesheet" type="text/css" href="../css/css_ie.css" />
    &lt;![endif]-->
    &lt;link rel="stylesheet" type="text/css" href="../css/css_all.css" />

登入發表回應

海綿寶寶

iT邦大神 1 級 ‧ 2010-04-21 22:57:17

參考看看
MozTW

回應
分享
檢舉

登入發表回應

edenfwu

iT邦新手 5 級 ‧ 2010-04-22 18:44:11

判斷瀏覽器的方法(javascript)
var isIE = navigator.userAgent.search("MSIE") > -1;
var isIE7 = navigator.userAgent.search("MSIE 7") > -1;
var isIE8 = navigator.userAgent.search("MSIE 8") > -1;
var isFirefox = navigator.userAgent.search("Firefox") > -1;
var isOpera = navigator.userAgent.search("Opera") > -1;
var isSafari = navigator.userAgent.search("Safari") > -1;//Google瀏覽器是用這核心
if (isIE) {
//是IE

}
.......