1

我正在尝试将一些 css 从我的母版页移到样式表中。基本上，我做了什么：

  • 将内联 css 复制/粘贴到新样式表中
  • 从母版页引用样式表

完成此操作后，设计视图继续按预期显示（当我从母版页中取出 css 时，我看到我的样式消失了，但是在我添加对我放入的新样式表的引用后，它们又返回了，正如预期的那样）。但是，当我运行该项目并在 Firefox 中打开它时，它就像样式消失了一样。对我来说这似乎很奇怪，它可以在设计视图中工作，但不能在 Web 浏览器中工作。

我认为这只是因为我不知道 b/c 的一些非常简单的事情，我是制作网站的新手。

这是母版页的当前代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" runat="server" />
    <link href="~/Styles/SiteMaster.css" rel="stylesheet" type="text/css" runat="server" />
    <link href="~/Styles/Menu.css" rel="stylesheet" type="text/css" runat="server" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="~/scripts/ddaccordion.js"></script>
    <script type="text/javascript" src="~/scripts/menuInit.js"></script>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <table class="mainTable">
        <tr>
            <td class="headerCell" colspan="2" />
        </tr>
        <tr>
            <td class="menuCell">
                <div class="urbangreymenu">
                    <h3 class="headerbar"><a href="Default.aspx">Home</a></h3>
                    <%--<ul class="submenu">
                    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
                    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
                    </ul>--%>

                    <h3 class="headerbar"><a href="PostItem.aspx">Post Items</a></h3>
                   <%-- <ul class="submenu">
                    <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
                    <li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
                    </ul>--%>
                </div>
            </td>
            <td class="contentCell">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </td>
        </tr>
        <tr>
            <td class="footerCell" colspan="2" />
        </tr>
    </table>
    </form>
</body>
</html>

这是 SiteMaster.css 的代码：

.mainTable
{
    width: 100%;
}
.menuCell
{
    width: 218px;
    height: 157px;
}
.headerCell
{
    height: 63px;
}
.footerCell
{
    height: 77px;
}
.contentCell
{
    height: 157px;
}
4

1 回答 1

2

设计时间会误导你。如果您的网站结构是这样的：

content
   site.css
master
   site.master
pages
   store
      mypage.aspx
   admin
      tools
         adminpage.aspx

母版页中的 css 链接可能如下所示：../content/site.css并且此链接看起来是正确的，并且 VS 设计器在设计时找到 css 没有问题。但是，在运行时，母版页不会单独运行，而是与内容页一起运行，并且指向 css 页面的链接按原样发送到客户端。您可能认为这../../content/site.css可以工作，但这仅适用于mypage.aspx但不适用于adminpage.aspx.

解决方案是让服务器帮助您：

<link rel="stylesheet" type="text/css" href="~/content/site.css" runat="server" />

这样，无论页面文件夹是什么，您总能获得正确的链接。

要克服 css 浏览器缓存，请在链接中添加一个版本File.css?version=1并在任何更改时增加它，或使用哈希版本控制，如此处http://www.codeproject.com/Articles/203288/Automatic-JS-CSS-versioning-to -更新浏览器缓存

于 2012-08-11T20:42:18.813 回答