ASP.NET Core MVC - 未应用内联 css 样式答案

【问题标题】：ASP.NET Core MVC - inline css style not appliedASP.NET Core MVC - 未应用内联 css 样式
【发布时间】：2017-06-15 09:44:12
【问题描述】：

在我的 ASP.NET MVC 项目中，当我将内联样式应用于 html 元素时，我有一个奇怪的行为——它们没有显示在浏览器中。但是，如果我使用 css 类在 一个外部 css 文件 中放置相同的样式，它将起作用（即使将 css 类放在同一页面上的 <style> 标记中也不起作用。

例子：

不工作

<div style="height: 100px; width: 100px; background: red;">
    ABC
</div>

不工作

<!DOCTYPE html>
<html>
<head>
    <style>
        .myClass {
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="myClass">
        ABC
    </div>
</body>
</html>

工作

mystyle.css

.myClass {
    height: 100px;
    width: 100px;
    background: red;
}

index.cshtml

<div class="myClass">
    ABC
</div>

如果我不使用cshtml 文件而只加载静态html 文件，那么所有变体都可以工作。

这是为什么呢？我们如何解决它？

【问题讨论】：

你检查过浏览器F12工具吗？它是否显示 HTML 中的样式？如果您检查元素，它是否显示它们被覆盖或其他东西（至少 Chrome 显示了这一点）？
如果我尝试一下，您的 HTML 就可以工作。这意味着有一些其他样式覆盖它。正如 juunas 提到的，尝试开发工具并检查覆盖它的内容。您可以将 !important 添加到内联样式以确保应用您的样式。
用 F12 检查 - 没有样式覆盖。您是作为 1cshtml 文件还是常规文件进行检查？
你试过了吗
我实际上已经能够重现这个问题。我正在 Visual Studio 2017 中开发并运行 Chrome。页面源具有正确的内联样式，但浏览器不会在加载时呈现它们。但是，如果我使用 F12 开发工具并取消选中内联样式，然后重新检查它所应用的样式。

标签： css asp.net-mvc asp.net-core-mvc

【解决方案1】：

归根结底，在这种情况下，真正重要的是发送到浏览器的代码，而不是用于将代码发送到浏览器的后端装置。如果当您通过html 页面发送它时它可以工作，但当您通过cshtml 页面发送它时它不起作用，那么在这两种情况下会向浏览器发送不同的东西。

因此，理解问题的关键是找出不同之处。使用开发者工具在html页面发送的页面上查看源码，在cshtml页面发送的页面上查看源码。比较两种情况下发送的 html。鉴于示例代码非常小，应该很容易发现差异。找到差异后，您将对发生的事情有一个很好的线索。

【讨论】：

【解决方案2】：

您的代码示例不包含任何与 MVC 相关的内容，因此它应该“按原样”发送到您的浏览器。因此，如果它可以在一个简单的 .htm 文件中工作（确实如此），它也可以在 .cshtml 中工作，除非您忘记告诉我们“什么不工作”。

根据您的浏览器，您可以使用 F12 或 Ctrl U (etc) 键查看页面源代码，并检查它是否与您在编辑器中输入的内容匹配。您还可以使用开发人员工具或 Firefox 中的 Firebug 来准确检查哪个样式应用于哪个元素。

此外，如果您的示例不完整，您的 MVC 网站可能使用了一些功能作为布局页面和一些默认 CSS，这会阻止您的内联样式完全符合您的预期。

【讨论】：

我想你误解了这个问题:)