Question

我试图将一些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;
}

Answer 1

设计时间误导你。如果您的网站结构如下：

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-update-browser-cach

将内联css移动到样式表后，在设计视图中工作，但在运行时不工作

1 个答案: