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

问题似乎有两个部分。

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. 包括一个 JavaScript 库，如HTML5Shiv（它也包含在优秀的Modernizr库中）。这使得旧版本的 Internet Explorer 至少可以识别 HTML5 元素，例如<header />. 请注意，它不会添加 CSS3 支持；之类的东西border-radius不起作用，但至少你会得到正常的边界。
于 2013-07-01T16:31:11.523 回答