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のようにハッシュバージョニングを使用します-update-browser-cach

于 2012-08-11T20:42:18.813 に答える