ASP.NET Core MVC-內嵌css風格不適用

我有一個奇怪的行爲，在我的ASP.NET MVC項目中，當我將內聯樣式應用到html元素時 - 它們不會顯示在瀏覽器中。但是，如果我使用一個CSS類把同樣的造型在外部CSS文件它會工作（甚至把CSS類的<style>標籤在同一頁上不工作ASP.NET Core MVC-內嵌css風格不適用

例：

不工作

<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文件那麼所有的變化工作。

這是爲什麼？我們如何解決它？

來源

2017-06-15 developer82

您是否使用瀏覽器F12工具進行了檢查？它是否在HTML中顯示樣式？如果你檢查元素是否顯示他們被覆蓋或什麼（至少Chrome顯示這個）？ – juunas

如果我嘗試它，您的HTML的作品。這意味着有一些其他風格壓倒它。正如juunas提到的那樣嘗試開發人員工具並檢查重寫它的是什麼。您可以添加！對於內聯樣式重要，以確保您的樣式得到應用。 – Vijay

使用F12進行檢查 - 無樣式覆蓋。您是否將其作爲1'cshtml'文件或作爲常規文件進行檢查？ – developer82

在一天結束時，在這種情況下真正重要的是發送給瀏覽器的代碼，而不是用於將代碼發送到瀏覽器的後端。如果它通過html頁面發送，但在通過cshtml頁面發送時不起作用，那麼在這兩種情況下會向瀏覽器發送不同的內容。

所以理解這個問題的關鍵是弄清楚有什麼不同。使用開發者工具查看通過html頁面發送的頁面上的源代碼，並通過cshtml頁面查看頁面上的源代碼。比較兩種情況下發送的html。鑑於示例代碼非常小，應該很容易發現差異。一旦你發現不同之處，你就會知道發生了什麼。

來源

2017-06-15 12:06:04

您的代碼示例不包含與MVC相關的任何內容，因此它應該「按原樣」發送到您的瀏覽器。因此，如果它在一個簡單的.htm文件（它是）中工作，它也可以在.cshtml中工作，除非您忘記告訴我們關於「什麼不工作」的信息。

根據您的瀏覽器，您可以使用F12或Ctrl U（等）鍵查看頁面源代碼，並檢查它是否與您在編輯器中的內容相符。您也可以使用開發人員工具或Firefox中的Firebug來檢查哪種樣式適用於哪個元素。另外，如果您的示例不完整，您的MVC網站可能會使用一些功能作爲佈局頁面和一些默認CSS，這些功能會阻止您的內聯樣式完全按照您的預期進行操作。

來源

2017-06-15 13:08:31 AFract

ASP.NET Core MVC-內嵌css風格不適用

回答

相關問題