0

ビューに css スタイルシートを適用しましたが、表示してもレンダリングされません。ここで何が問題なのですか：

編集: Firefox 17 では動作しますが、IE10 では動作しません (互換性ビューと関係がありますか? 修正方法がわかりません)

主人：

@using System.Web.Optimization

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>User_Master</title>
    @Styles.Render("~/Content/Styles.css")
</head>
<body>
    <header>
        <p>header</p>
    </header>
    <nav>
        @Html.Partial("~/Views/Shared/User_Nav.cshtml")
    </nav>
    <section>
        @RenderBody()
    </section>
</body>
</html>

スタイル.css

header {
    border-color: #0094ff;
    border-bottom-right-radius:10px;
    border-top:hidden;
    border-left:hidden;
    border-bottom:solid;
    border-right:solid;
    box-shadow:2px 2px;
}

家

@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/User_Master.cshtml";
}

<h2>Home</h2>
4

1 に答える 1

0

問題には 2 つの部分があるようです。

CSS

問題の一部は、無効な CSS に関連しています。たとえば、border-topスタイル、幅、色の組み合わせの簡略宣言は次のとおりです。

border-top: [width style colour]

これを念頭に置いて、CSSを次のように変更します。

header 
{
    border: 2px solid #0094ff; /* width style colour */
    border-bottom-right-radius: 10px;
    border-top-style: hidden;
    border-left-style: hidden;
    box-shadow: 2px 2px 0px #000; /* x-offset y-offset blur colour */
}

IE / 互換モード

互換モードで IE を使用している場合は、IE8 (またはそれ以前) のエンジンを使用してレンダリングしている可能性があります。残念ながら、これらは HTML5 を理解しないため、<header />要素border-radiusやbox-shadowCSS 宣言などは無視されます。これを修正するには、いくつかの方法があります。

  1. 要素に追加<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />します<head />。これにより、最新のレンダリング エンジンを使用することが IE に通知されます。これについて詳しくは、このページを参照してください。
  2. HTML5Shivのような JavaScript ライブラリを含めます(優れたModernizrライブラリにも含まれています)。これにより、古いバージョンの Internet Explorer は、少なくとも のような HTML5 要素を認識できます<header />。ただし、CSS3 サポートは追加されないことに注意してください。のようなものborder-radiusは機能しませんが、少なくとも通常の境界線が表示されます。
于 2013-07-01T16:31:11.523 に答える