Question

我已经在我的视图中应用了一个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>

Styles.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>

Answer 1

问题似乎有两个部分。

<强> 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-shadow CSS声明之类的内容。您可以尝试解决此问题：

将<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />添加到您的<head />元素中。这将告诉IE您要使用最新的渲染引擎。有关详细信息，请参阅this page。
包含一个像HTML5Shiv这样的JavaScript库（它也包含在优秀的Modernizr库中）。这允许旧版本的Internet Explorer至少识别像<header />这样的HTML5元素。请注意，它不会添加CSS3支持;像border-radius之类的东西不起作用，但至少你会得到正常的边界。

CSS @ Styles.Render没有渲染样式表

1 个答案: