如何更改CSS樣式取決於瀏覽器

我知道在mootools中有瀏覽器檢測。因此，我想知道如何改變CSS樣式取決於瀏覽器？ -V-如何更改CSS樣式取決於瀏覽器

2010-12-03 Alpha Chung

有一個類似的問題：http://stackoverflow.com/questions/4323186/browser-os-as-body-class – meo 2010-12-03 12:50:58

瀏覽器檢測不應該完成，因爲沒有保證你得到正確的響應，一些瀏覽器可以欺騙用戶代理。相反，使用功能檢測。但是，大多數現代瀏覽器並不需要特殊的CSS。只有IE需要這樣的黑客，但這就是爲什麼他們創造了「有條件的評論」。 – Rob 2010-12-03 13:21:48

也許下面的CSS黑客將成爲：

http://www.cssblog.es/hacks-css-mediante-selectores/

商祺！

來源

2010-12-03 13:49:30 Lobo

鉻怎麼樣？ – 2010-12-05 11:46:22

了個人的提醒，我張貼的jsfiddle這個小例子： http://www.jsfiddle.net/ghazal/XUXAP/ 也許它會幫助你乾杯。

來源

2010-12-03 13:54:37

非常感謝！ ^^ – 2010-12-05 11:50:13

2種方式：

服務器端

檢測用戶代理字符串和服務頁面生成過程中關聯的樣式表。

條件樣式表

這只是提供給IE瀏覽器（所有版本）

<!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<!--<![endif]-->

看看：

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

有關與不同版本的條件恰恰。

注意

可能是最好的嘗試修復潛在的問題，而不是訴諸於黑客，因爲這將是一個更容易維護。同時也要注意新版本一直在發佈，瀏覽器版本可能被欺騙等等。當你找不到其他解決方案時，它應該只用於特定的，孤立的修復。

來源

2010-12-03 13:55:38

瀏覽器檢測只適用於較舊版本的IE，如果其他現代瀏覽器出現問題，則可能是開發人員故障。

一種方式是服務器端檢查：

// returns true on at least a minimal version of IE, or if is not IE 
function checkIEVersion(minimal) { 
    var ver = true; 
    if (navigator.appName == 'Microsoft Internet Explorer') { 
     var ua = navigator.userAgent; 
     var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 
     if (re.exec(ua) != null) ver = parseFloat(RegExp.$1) >= minimal; 
    } 
    return ver; 
};

另一種方法是在HTML中使用conditional comments：

<!--[if lt IE 9]><html class="ie"><![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--><html><!--<![endif]-->  

<!--[if lt IE 9]> 
<script src="js/html5.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="css/ie.css"> 
<![endif]-->

然後定期CSS樣式看起來就像這樣：

.somestyle {}

ie.css中的後備樣式將如下所示：

.ie .somestyle {}

來源

2013-06-03 18:24:41 Danijel

if (Browser.chrome) { document.id('foo').addClass('bar'); }

更多看到Mootools documentation for Browser

來源

2013-06-04 10:32:20 Erin

尼斯問題，首先您就可以使用CSS添加不同的類別：

.color-safari{} 
.color-chrome{}

然後使元素帶班而空，如：

<input id="myID" type="text" name="hi" class="">

然後在script par t，你可以添加下面的查看瀏覽器：

 var userAgent = navigator.userAgent.toLowerCase(); 
    if (userAgent .indexOf('safari')!=-1){ 
     if(userAgent .indexOf('chrome') > -1){ 
     //browser is chrome 
      $("#myID").addClass("color-chrome"); 
     }else{ 
     //browser is safari, add css   
      $("#myID").addClass("color-safari"); 
     } 
     }

我試過了，它的工作，歡呼！

來源

2014-11-06 13:19:38 Neil

如何更改CSS樣式取決於瀏覽器

回答

相關問題