webdevqa.jp.net

変更後にCSSが適用されない

ASP.NET MVCアプリケーションのCSSでスタイルを適用できないという問題があります。動作は初めて適用され、その後のCSSへのその後の変更が_Layout.cshtmlに反映されません。ここで何が欠けているのかわかりません。

CSSファイル

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header,
footer,
nav,
section {
    display: block;
}

/* Styles for basic forms
-----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
}

.editor-label 
{
    margin: 1em 0 0 0;
}

.editor-field 
{
    margin:0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}
#Header
{
    color:white;
    padding:1px;
}
#Content
{
    float:left;
    margin:10px;
}
#SideBar
{
    float :left;
    margin:10px;
    padding :10px;
    border:  dotted 1px  red;
    width:180px;
    font-style:italic;
}
#Footer
{
    text-align:center;
    clear:both;
}

たとえば、#SideBarの「境界線」を赤から黒に変更しました。ただし、常に赤く表示されます。ここで根本的に悪いことをしているのかもしれません。

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
       <!--link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
      <link href="@Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>

<body>
   <div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;"   >

   </div>
   <div id="SideBar">
       @Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
   </div>
   <div id="Content">
        @RenderBody()
   </div>
   <div id="Footer">
        <p>Copyright &copy; XXXXXXX</p>
   </div>
</body>
</html>

ただし、物理ファイルの名前を変更して_Layout.cshtmlの参照を変更すると、行った変更を確認できます。

助けてください。

ありがとう

28
Alan B

キャッシュされたコンテンツを使用せずにページをリロードするには、Ctrl-F5を押します

78
Jahan Zinedine

ブラウザは、CSSファイルなどの静的ファイルをキャッシュできます。

CSSファイルを更新し、参照したときに変更が表示されない場合は、ブラウザーでCTRL-F5を使用してみてください。

11
BonyT

これは、私の場合のように、他に何もできないときに機能します。

クレジットは次の場所に移動します:atticae

ランダムなクエリパラメータをスタイルシートのURLに追加できます(たとえば、JavaScriptまたはサーバー側のコードを介して)。読み込まれているcssファイルは変更されませんが、ブラウザーが別のURLを検出してキャッシュされたスタイルシートを読み込まないため、キャッシュができなくなります。

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
1
Somebody

残念ながら、ctrl + f5は機能しません。 Chromeに移動する必要があります:F12-> [ネットワーク]タブ->すべての取得および投稿レコードがある白い領域内で右クリック->ブラウザーのキャッシュをクリアします。これで、Ctrl + F5またはF5を押すだけで機能します。

0
macio.Jun

私の場合、問題はコードで参照されているリソーススタイルファイルがあったことでした

string location = Page.ClientScript.GetWebResourceUrl(typeof(PageBase), "MyNS.Common.Web.Base.CommonStyle.css");
LiteralControl include = new LiteralControl(string.Format(tempLink, location));

ファイルの一部のスタイルを変更または追加すると、CommonStyle.cssに反映されませんでした。キャッシュをクリアした後もWebページに反映されませんでした(ctrl + f5、ctrl + shift + f5) ?

私の分析で私はその理由を見つけました-

デバッグを停止し、ソリューションを再構築して再度実行して、すべてのWebリソーススタイルをもう一度ロードします。通常、htmlの変更で通常行うようにキャッシュをクリアするだけでは効果がありません。これを行った後、スタイルの私の変更が反映されます。ウェブページとそれは私の問題を修正しました。

0
Rinoy Ashokan