如何将母版页和 css 应用于子页

Posted 2023-03-06

【中文标题】如何将母版页和 css 应用于子页

【英文标题】：How to apply master page and css to child page

【发布时间】：2011-07-08 22:39:58

【问题描述】：

我有一个母版页可应用于我的所有页面，母版页正在执行它的工作，但是似乎无法解析我在子文件夹中拥有的页面的 CSS 文件地址。

我有一组这样的文件夹：

根目录 用户内容 管理内容

由于母版页和 css 文件位于根目录中，因此当母版页尝试在 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 文件位于我的根文件夹而不是子文件夹中

【问题讨论】：

对于初学者，将所有 CSS 样式表移动到根目录下的公共 CSS 文件夹中。它们不需要位于不同/受限制的文件夹中:)

您是否查看了输出中的源代码以了解渲染到浏览器的实际路径是什么？

答案可能是~/RootContent/UsersContent/StyleSheet.css，但我不能百分百确定。

【参考方案1】：

最简单的方法是在你的 web 项目下添加 App_Themes 文件夹。添加一个主题并在该主题下添加所有 css 文件，包括它们各自的图像目录。

在您的 web.config 中，添加

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

注意：- 在这种情况下，所有的 css 都会被应用。如果您有特定于浏览器的 css，那么这不是办法。

[SEE UPDATED]

要由 IE 6 而不是其他浏览器加载的 CSS 文件（如“iespecific.css”），请在网页的 HEAD 部分中使用以下代码：

<!--[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 cmets，因为它们包含在“”中。然而，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”时才使用以下语句。

同样，上面的代码可以正常工作，因为普通浏览器会将“”和“”解释为它无法识别的 HTML 标记，并忽略它们。但是，此代码不会在 HTML 验证器中验证为正确，因为它不使用有效的 HTML 标记。

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

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

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

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

【讨论】：

那不是，我每个浏览器都有不同的 CSS 文件

非常感谢！它确实奏效了！几个小时以来一直有这个问题！

【参考方案2】：

我一直为此使用ResolveClientUrl。你可以试试这个而不是ResolveUrl吗？这里是 a post 讨论差异。

【讨论】：

仍然无法正常工作，但我意识到生成的代码确实是 ../Stylesheet.css 但仍然没有应用 CSS

【参考方案3】：

您是否尝试将runat="server" 添加到链接标签？为我工作。