5

我正在开发一个网站，并注意到它在所有浏览器上都无法正确执行。

我想为每个浏览器创建不同的 CSS 样式表，主要是 IE。

我的问题在于如何使用不同的浏览器调用不同的样式表。

我也找不到在我的 MVC 网站中调用主 site.css 的位置，如果有人可以告诉我在 MVC 网站中调用 site.css 的位置，那就太好了。

那么我在哪里以及如何在 MVC 网站中为不同的浏览器调用不同的样式表？

4

4 回答 4

4

在 ASP .NET MVC 中使用特定于浏览器的样式表没有什么不同。您放置if语句并指向样式表。在这里查看更多。您可以将样式表语句放在_Layout.cshtml文件Views\Shared夹中的文件中

在 ASP .NET MVC 中，样式表位于Content文件夹中。

ASP .NET MVC 4 使用 Minification 和 Bundling。查看App_Start文件夹内部，您将看到一个 BundleConfig.cs 文件，在里面，您将看到bundles包含 css 和 javascript 的文件。在_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-26T12:03:01.177 回答
3

使用条件：

<!--[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-26T12:00:36.870 回答
2

您的方法实际上不是最佳实践。您不应该针对特定的浏览器，而应该针对标准（例如 HTML5 和 CSS3）。

如果您认为您的目标受众可能会使用旧版浏览器，那么请以 HTML4 和 CSS2 为目标。

另外...考虑使用 CSS 规范化，而不是为不同的浏览器使用不同的样式表。

从个人（实际上是专业的）经验来看，我发现在使用 CSS 规范化时，如果我什至必须编写特定于浏览器的样式表，那么我的全局样式表实现得很差......因此最好在 CSS 规范化之上构建一些东西这在全球范围内有效，而不是为浏览器编写黑客！

谷歌： HTML5 Boilerplate |CSS Normalization

您可能想在这里尝试... http://html5boilerplate.com/

您可能喜欢的另一项研究是Google Chrome Frame

于 2012-11-26T12:26:42.607 回答
2

你可以在 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-26T12:05:21.590 回答