logo标签列表

ASP.NET Core MVC - 行内 CSS 样式未应用

cssasp.net-mvcasp.net-core-mvc
7
我有一个奇怪的行为，在我的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文件，则所有变体都可以正常工作。
为什么会这样？我们该如何解决？
3
你是否使用浏览器的F12工具进行检查？它是否显示HTML中的样式？如果你检查该元素，是否显示其被覆盖或者发生了其他变化（至少Chrome会显示这些信息）？ - juunas
如果我尝试了你的HTML代码，那么它能够工作。这意味着有其他的样式正在覆盖它。就像juunas所提到的，可以尝试使用开发者工具来检查是哪个样式在覆盖。你可以在内联样式中添加!important来确保你的样式被应用。 - Vijay
已使用F12进行了检查 - 没有样式覆盖。您是作为一个cshtml文件还是一个普通文件进行检查的？ - developer82
你尝试过 <style type="text/css"> 吗？ - hasan
2
我已经能够重现这个问题。我正在使用Visual Studio 2017进行开发，并运行Chrome浏览器。页面源代码具有正确的内联样式，但浏览器在加载时不会渲染它们。然而，如果我使用F12开发工具，取消选中内联样式，然后重新选择样式，它就会生效。 - Andrew Hawes
2个回答
1
在这种情况下，真正重要的是发送到浏览器的代码，而不是用于发送代码的后端方式。如果您通过一个html页面发送它时它可以工作，但是如果您通过一个cshtml页面发送它时它无法工作，那么在这两种情况下向浏览器发送了不同的东西。
因此，理解问题的关键是找出不同之处。使用开发人员工具查看通过html页面发送的页面的源代码，并查看通过cshtml页面发送的页面的源代码。比较两种情况下发送的html。鉴于示例代码相当简单，应该很容易发现差异。一旦找到差异，您就会有一个很好的线索。
0

您的代码示例中没有包含任何与MVC相关的内容，因此应将其“原样”发送到浏览器。 因此，如果在简单的.htm文件中可以运行（并且确实可以），则在.cshtml文件中也将可以运行，除非您忘记告诉我们有关“不起作用”的信息。

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

另外，如果您的示例不完整，则您的MVC网站可能使用一些布局页和一些默认CSS，这些CSS会阻止您的内联样式完全按照您的预期执行。

我觉得你误解了问题 :) - Enrico
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接