如何将母版页和CSS应用于子页面

Question

我有一个主页面，适用于我所有的页面，主页面正在发挥作用，但是似乎无法解决我在子文件夹中拥有的页面的CSS文件地址。

我有一组文件夹，如下所示：

RootContent UsersContent AdminContent

由于主页面和CSS文件位于Root content中，当主页面尝试定位UsersContent或AdminContent内部的CSS文件时，它找不到。

我使用JavaScript检测浏览器并为大多数浏览器设置CSS，另外还有一个IE6文件，因为这里需要，有什么想法吗？

<script type="text/javascript">
    if((BrowserDetect.browser.toString() == "Firefox") && (BrowserDetect.version.toString() == "3.5"))
    {
        document.write('<link rel="Stylesheet" href="<%=ResolveUrl("~/StyleSheet.css") %>" type="text/css" />');
    }
    else if((BrowserDetect.browser.toString() == "Explorer") && (BrowserDetect.version.toString() == "6"))
    {
        document.write('<link rel="Stylesheet" href="~/StylesheetIE6.css" type="text/css" />');
    }
</script>

在上面的代码中，我尝试使用<% ResolveUrl("~/StyleSheet.css") %>，但是没有起作用。它只在同一个文件夹中有效，而不是在子文件夹中。

编辑：为了澄清，我的CSS文件位于根目录而不是子文件夹中。

- Termiux

---

首先，将所有的CSS样式表移动到根目录下的一个公共CSS文件夹中。它们不需要在不同/受限制的文件夹中 :) - IrishChieftain

你是否查看了输出的源代码，以查看在浏览器中呈现的实际路径是什么？ - Infotekka

答案可能是 ~/RootContent/UsersContent/StyleSheet.css，但我不确定100%。 - Greg

Answer 1

在您的Web项目下添加App_Themes文件夹是最简单的方法。 添加一个主题，然后在该主题下添加所有包括其各自图像目录的css文件。

在您的web.config中添加以下内容：

``` ```

它将自动添加到每个页面。

注意：在这种情况下，将应用所有css。 如果您有特定于浏览器的css，则不是这种方式。

[SEE UPDATED]

在您的网页HEAD部分使用以下代码，加载一个名为“iespecific.css”的CSS文件，使其只被IE 6浏览器加载，而不是其他浏览器：

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

同样地，对于任何版本的 IE 5（包括 5.0、5.01、5.5 等），请使用以下代码：

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

为了检测IE 5.5的发布版本，您需要以下代码：

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

例如，要测试所有版本大于或等于6的IE，您可以使用：

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

上述代码示例之所以有效，是因为普通浏览器将整个块视为HTML注释，因为它们被包含在“”中。然而，IE 5或更高版本将尝试解析该块，以查看是否有特定于其的指令。

您还可以使用此方法排除某个样式表。例如，要从IE 6中排除CSS文件“not-ie.css”，请使用：

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

注意运算符"!"紧跟在"IE"之前。这是NOT运算符，只有当浏览器未匹配到表达式"IE 6"时才使用后面的语句。

同样，上述代码之所以有效，是因为正常的浏览器会将""和"<[endif]>"解释为它无法识别的HTML标签并忽略它们。但是这段代码不会在HTML验证器中被验证为正确，因为它没有使用有效的HTML标签。

请注意，您还可以在不指定版本号的情况下测试IE。例如，以下代码仅在浏览器不是IE 5或更高版本时加载样式表：

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

这个非标准功能的Microsoft文档可以在http://msdn2.microsoft.com/en-us/library/ms537512.aspx找到。

由于文档没有指明这些功能仅适用于IE的Windows版本，我假设它们也适用于Macintosh版本。不过我无法验证这一点。

- user240141

---

那么，我有针对每个浏览器不同的CSS文件。 - Termiux

非常感谢！它起作用了！这个问题困扰我好几个小时了，谢谢！ - Termiux

Answer 2

你尝试过在链接标签中添加runat="server"吗？这对我有用。

- seanmcgriff

Answer 3

我一直使用ResolveClientUrl来实现这个目的。你可以尝试使用它，而不是ResolveUrl吗？这里有一篇文章讨论了它们之间的区别。

- Bala R

---

仍然无法工作，但我刚意识到生成的代码确实是../Stylesheet.css，但仍未应用CSS。 - Termiux