1
我想爲不同的瀏覽器類型使用不同的CSS文件。有沒有簡單的HTML代碼可以檢測不同類型的瀏覽器並相應地包含CSS文件？不同瀏覽器的CSS文件
A
回答
1
我只知道爲即：
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
2
您必須使用服務器端在所有瀏覽器上執行此操作。如果你選擇服務器端的方式，你將不得不解析User-Agent標題，並從該解析添加有效的CSS。我建議你不要那樣做因爲用戶代理解析是一個單調乏味的任務，並有更加優雅的方式來處理瀏覽器的怪癖。
值得指出的是，如果你有興趣只需要添加特殊的CSS規則（文件）的Internet Explorer有一個特殊的語法：
<!--[if lte IE 6]>
爲IE 6和最多
也請注意，是一些CSS框架，以避免每個瀏覽器規則。我認爲最大的可能是YUI 3 Grid。如果使用得當，這會給所有瀏覽器帶來相同的外觀和感覺。
0
通常更容易在同一個樣式表中使用 '黑客'。
這不是縱容它們的使用（因爲我不想被傳道者被改裝成向下做:)）
http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks
http://www.dynamicsitesolutions.com/css/filters/support-chart/
http://ajaxian.com/archives/css-browser-hacks
http://www.456bereastreet.com/archive/200411/the_underscore_hack/
對於不同的IE版本（通常是最重要的）版本ERE是有條件的IE「如果」，它可以處理很多參數： http://www.quirksmode.org/css/condcom.html
3
這是一個JavaScript類型的事情。 Javascript非常適合瀏覽器選擇。只需使用瀏覽器檢測指向一個不同的CSS文件。
把東西像這樣的頭：
<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>
我不能確認，但JS是沿着你需要做的是什麼線。
+0
如果用戶禁用JavaScript，該怎麼辦？ – Kezzer 2009-11-10 09:09:17
+0
然後，您只需使用
0
如果您嘗試包含特定於Internet Explorer的CSS文件，則條件HTML註釋可用。有關更多信息，請參閱this quirksmode article。
對於其他瀏覽器，您必須使用JavaScript或服務器端檢測訪問者正在使用的瀏覽器，並根據結果包含合適的CSS文件。關於quirksmode的另一篇關於here的文章。
1
有對瀏覽器的依賴樣式表幾種不同的技術：
1）就像已經說了，你可以使用條件語句來檢測IE版本，例如
2）如果您使用的是PHP，Ruby等服務器端語言，則可以基於HTTP_USER_AGENT服務器變量（例如，
if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){
print "Firefox user."; $firefox = true;
// process here for firefox browser
}
這種技術是強大的，因爲你可以發現幾乎所有的瀏覽器，並在此基礎上，你可以包括（或打印，要準確）任何需要的.css文件到您的PHP模板。 例如
if ($firefox) print '<link rel="stylesheet" href="http://site.com/firefox.css">';
這種技術的優點是，它最早出現，甚至在頁面開始被髮送給用戶，你可以檢測瀏覽器版本非常精確。
3）當然，您可以使用javascript檢測瀏覽器版本，這隻需要一些變量，例如，
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
但this example的，應使用該分析變量的值的代碼，等等。
5
不要使用CSS黑客，JavaScript來切換樣式表或類似的東西。
我從來沒有必須使用多個樣式表用於不同的瀏覽器或任何無效的CSS黑客。
它不需要。有條件的註釋對於IE6或更低版本的PNG修補程序是有用的，但是從中可以看出，如果您知道CSS和各種瀏覽器錯誤，您可以輕鬆地爲IE 5.5編寫XHTML和CSS代碼，而不會出現很多問題。
0
你應該考慮改變你對不同瀏覽器使用不同樣式表的希望。
對於所有瀏覽器，幾乎所有的事情都可以通過相同的樣式表來完成。它需要更多的工作來製作乾淨的標記並使用強大的風格，但是您獲得的不僅僅是更少的css文件，還有一個非常有可能在您從未聽說過的瀏覽器中工作的頁面，以及未來版本的瀏覽器。此外，深思熟慮的標記使盲人瀏覽者可以訪問該頁面，並且使搜索引擎更容易工作，以便他們可以索引更多內容。
這就是我在我們公司的網站上使用的。在IE 8發佈的時候，我不需要改變一件事就可以使它工作。 :)
請注意，proper doctype對於跨瀏覽器獲得一致行爲至關重要。如果沒有它，IE會模擬IE 4的大部分渲染錯誤，包括incorrect box model。
0
<head>
<link rel="stylesheet" type="text/css" href="generic.css" />
<![if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="notie.css" />
<![endif]>
</head>
+5
@ Deepak-歡迎來到SO。您應始終在解答中提供解決方案。 – Michal 2012-03-20 16:24:41
0
您可以使用JavaScript來檢測和更改不同瀏覽器的CSS，但代碼有點笨重。
<script type="text/javascript">
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent
else if ((nameOffset=nAgt.lastIndexOf(' ')+1) <
(verOffset=nAgt.lastIndexOf('/')))
{
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
if (browserName == "Microsoft Internet Explorer") {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ms.css\">");
}
else if (browserName == "Firefox") {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ff.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/other.css\">");
}
</script>
相關問題
- 1. 基於瀏覽器加載不同的css文件
- 2. 每個瀏覽器的CSS不同？
- 3. 與不同瀏覽器的CSS兼容
- 4. CSS和不同的瀏覽器問題
- 5. 不同瀏覽器中的CSS
- 6. 不同瀏覽器的CSS前綴？
- 7. jQuery CSS瀏覽器的不同結果
- 8. 文件加載從瀏覽器到瀏覽器不同
- 9. 瀏覽器同步不看文件
- 10. CSS不同的瀏覽器意味着不同的輸出
- 11. CSS（WordPress）不同的圖像位置爲不同的瀏覽器
- 12. 不同瀏覽器給出不同結果的文件列表
- 13. 針對不同瀏覽器創建的不同網頁文件
- 14. 谷歌瀏覽器更新CSS文件
- 15. 瀏覽器緩存JavaScript和CSS文件
- 16. 瀏覽器緩存CSS文件
- 17. 文件不被瀏覽器
- 18. CSS箭頭在不同瀏覽器中的定位不同
- 19. position：fixed（css）在不同的瀏覽器中表現不同
- 20. 瀏覽器不響應CSS
- 21. 針對不同瀏覽器Chrome和Firefox的條件內聯CSS
- 22. CSS - 火狐給completley不同的解釋Chrome瀏覽器/ Safari瀏覽器
- 23. ASP/HTML/CSS - 與瀏覽器預覽不同的設計視圖
- 24. 與不同的瀏覽器
- 25. 不同的瀏覽器
- 26. 在不同的瀏覽器
- 27. 在不同的瀏覽器
- 28. ZF2不同的瀏覽器
- 29. 不同的瀏覽器，不同的IP？
- 30. 瀏覽器和手機中的不同輸出 - 相同的css
只是一個快速的評論：'lte' ==「小於或等於」，所以這將是IE6和下來，不起來。 'gte'是IE6以上。YUI +1（同時注意，版本3不在） – peirix 2009-11-10 07:50:03