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

发布于 2024-10-20 08:12:56 字数 1016 浏览 0 评论 0原文

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

我有一组这样的文件夹:

RootContent
      UsersContent
      AdminContent

由于母版页和 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 文件位于我的根文件夹而不是子文件夹中

I have a master page to apply to all my pages, the master page is doing its work however, it seems that is unable to resolve the CSS file address for pages I have in child folders.

I have a set of folders like this:

RootContent
      UsersContent
      AdminContent

Since the master page and css files are on the Root content, when the master page tries to locate the css file inside UsersContent or AdminContent it cannot find it.

I'm using JavaScript to detect the browser and set the css properly for most browsers and another file for IE6 since is required in here, any ideas?.

<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>

In the code above I tried <% ResolveUrl("~/StyleSheet.css") %> but didn't work, it works while in the same folder but not on the childs.

EDIT: Just to clarify my CSS file is on my Root Folder not on the childs

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

拧巴小姐 2024-10-27 08:12:56

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

在你的 web.config 中, add

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

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

[SEE UPDATED]

要由 IE 6 而不是其他浏览器加载的 CSS 文件(如“iespecic.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]-->

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

<!--[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]>

可以在 http://msdn2.microsoft.com/en-us/library/ms537512.aspx

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

A simplest way Add App_Themes folder under your web project. Add a theme and under that theme add all css files include their respective image directories.

In your web.config, add

It will automatically get added to the every page.

Note:- In this case all css will get applied. If you have browser specific css, then this is not the way.

[SEE UPDATED]

a CSS file like "iespecific.css" to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:

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

Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:

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

to detect the release build of IE 5.5, you will need the following code:

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

For example, to test for all versions of IE greater than or equal to version 6, you can use

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

The above code examples work because a normal browser sees the entire block as HTML comments since they are enclosed within "". IE 5 or above will however attempt to parse the block to see if it has instructions specific to it.

You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:

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

Notice the operator "!" immediately preceding "IE". This is the NOT operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser.

Again, the above code works because a normal browser will interpret "" and "<[endif]>" as HTML tags that it does not recognise, and ignore them. This code, however, will not validate as correct in a HTML validator, since it does not use valid HTML tags.

Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 or above:

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

Microsoft's documentation for this non-standard feature can be found at http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Since the documentation does not specify that these features apply only to the Windows versions of IE, I assume that they also apply to the Macintosh version. I'm not able to verify this though.

空‖城人不在 2024-10-27 08:12:56

我一直使用 ResolveClientUrl 来实现此目的。您可以尝试用它来代替 ResolveUrl 吗?这是一篇文章讨论了差异。

I have always used ResolveClientUrl for this purpose. Can you try that instead of ResolveUrl? And here's a post discussing the difference.

白云不回头 2024-10-27 08:12:56

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

Have you tried adding runat="server" to the link tag? Worked for me.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文