我在哪裏以及如何在我的MVC網站中爲不同的瀏覽器調用不同的CSS？

我正在開發一個網站，並且已經注意到它不能在所有瀏覽器上正常顯示。我在哪裏以及如何在我的MVC網站中爲不同的瀏覽器調用不同的CSS？

我想爲每個瀏覽器（主要是IE）創建不同的CSS樣式表。

我的問題在於如何使用不同的瀏覽器調用不同的樣式表。

我也無法找到在我的MVC網站中調用主site.css的位置，如果有人可以告訴我在MVC網站中調用site.css的位置會很好。

那麼我在哪裏以及如何在MVC網站中爲不同的瀏覽器調用不同的樣式表？

來源

2012-11-26 Pomster

使用瀏覽器特定的樣式表在ASP .NET MVC中沒有什麼不同。您將if聲明並指向樣式表。 See more here.你可以把你的樣式表的語句在_Layout.cshtml文件中的文件夾Views\Shared

在ASP .NET MVC，樣式表是在Content文件夾中。

ASP .NET MVC 4 uses Minification and Bundling。查看App_Start文件夾，您將看到一個BundleConfig.cs文件，並在裏面，您將看到包含css和javascript的bundles。在_layout.cshtl文件中，您將看到引用這些bundles的代碼，其類似於@Styles.Render("~/Content/css")。

「那麼我在哪裏以及如何在MVC網站中爲不同的瀏覽器調用不同的樣式表？」

在佈局文件有你的<head>標籤。像這樣：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     <meta name="viewport" content="width=device-width" /> 
     @Styles.Render("~/Content/css") 
     @Scripts.Render("~/bundles/modernizr") 
     <!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="iespecific.css" /> 
     <![endif]--> 

    </head> 
    ....

來源

2012-11-26 12:03:01 robasta

嘿，謝謝，你知道如何爲FireFox做同樣的事嗎？ – Pomster

不幸的是，條件註釋（'if IE'）僅適用於IE。對於Firefox，您可以使用服務器端代碼來執行檢查：@if（Request.UserAgent.ToLower（）。Contains（「firefox」））{add link to ff css}'。或者，你可以使用'moz' css hacks（請看這裏：http：//css-tricks.com/snippets/css/css-hacks-targeting-firefox/） – robasta

使用條件：

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

或

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

或

<!--[if gte IE 6]> (greater then IE6) 
<link rel="stylesheet" type="text/css" href="iespecific.css" /> 
<![endif]-->

我不知道在您的CSS將設在「MVC網站」，因爲我有不知道你使用的是什麼框架。

來源

2012-11-26 12:00:36

而如何我指定Chrome和Firefox？ – Pomster

那麼，如果你需要爲每個特定的瀏覽器編碼JavaScript，你肯定是做錯了你的CSS。但是，不，沒有其他瀏覽器，然後IE的條件CSS聲明。但是，您可以爲所有非IE瀏覽器使用'[if！IE]'。 –

你可以試試這個爲IE：

<!--[if IE]> 
According to the conditional comment this is IE<br /> 
<![endif]--> 
<!--[if IE 6]> 
According to the conditional comment this is IE 6<br /> 
<![endif]--> 
<!--[if IE 7]> 
According to the conditional comment this is IE 7<br /> 
<![endif]--> 
<!--[if IE 8]> 
According to the conditional comment this is IE 8<br /> 
<![endif]--> 
<!--[if IE 9]> 
According to the conditional comment this is IE 9<br /> 
<![endif]--> 
<!--[if gte IE 8]> 
According to the conditional comment this is IE 8 or higher<br /> 
<![endif]--> 
<!--[if lt IE 9]> 
According to the conditional comment this is IE lower than 9<br /> 
<![endif]--> 
<!--[if lte IE 7]> 
According to the conditional comment this is IE lower or equal to 7<br /> 
<![endif]--> 
<!--[if gt IE 6]> 
According to the conditional comment this is IE greater than 6<br /> 
<![endif]--> 
<!--[if !IE]> --> 
According to the conditional comment this is not IE<br /> 
<!-- <![endif]-->

注意特殊的語法：

gt: greater than 
lte: less than or equal to

來源

2012-11-26 12:05:21 Fred

你的做法其實並不是最好的做法。您不應該針對特定的瀏覽器，而應該以標準（例如，HTML5 & CSS3）爲目標。

如果您認爲您的目標受衆可能會使用舊瀏覽器，那麼您的目標是HTML4和CSS2。

另外...考慮使用CSS規範化，而不是針對不同的瀏覽器有不同的樣式表。我發現，當使用CSS規範化，如果我甚至不得不寫一個瀏覽器特定的樣式表，那麼我的全局樣式表執行的效果很差...因此，它更好地構建一些東西在全球範圍內工作的CSS標準化的頂端，而不是爲瀏覽器寫入黑客！

Google：HTML5 Boilerplate | CSS Normalization

你可能想嘗試在這裏... http://html5boilerplate.com/

你可能會喜歡研究的另一個位爲Google Chrome Frame

來源

2012-11-26 12:26:42 series0ne

謝謝我會看看這個，怎麼可以我告訴瀏覽器使用什麼標準？ – Pomster

嘿，谷歌瀏覽器框架是真棒哇，我有點不安讓用戶下載並安裝之前使用我的網站。 – Pomster

@Pommy，以及你可以測試你自己的瀏覽器，看看它支持使用此... http：//html5test.com/ – series0ne

我在哪裏以及如何在我的MVC網站中爲不同的瀏覽器調用不同的CSS？

回答

相關問題