为什么我的样式表在 MVC 上变得混乱？答案

【问题标题】：Why is my Style Sheet Going HayWire on MVC?为什么我的样式表在 MVC 上变得混乱？
【发布时间】：2009-09-28 14:44:58
【问题描述】：

我正在努力熟悉 ASP.NET 上的 MVC。我有我的 global.asax

routes.MapRoute("Dept", "Dept/Invoice/{Category}/{Name}", 
new {controller = "Dept", action = "Invoice", Category = "", Name = ""});

Controller.cs 代码获取数据并将其放入一个表格中，这很好。我的 html 开始...

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<BMICPolicy.Dept>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="Stylesheet" type="text/css" href="../../Content/Test.css" />
<html xmlns="http://www.w3.org/1999/xhtml">

样式表 -

body
{
    font-family: Arial, Verdana, Book Antiqua, Sans-Serif;
    font-size: 12px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    text-align: center;
     text-align: -moz-center;
    padding: 0px;
    margin: 0px;
    position: relative;
}
table 
{
  border: solid 1px #000000;
  border-collapse: collapse;  
}

table td 
{
  padding: 5px;   
  border: solid 1px #000000;  
}

table th
{
  padding: 6px 5px;  
  background-color: #729FCB; 
  border: solid 1px #000000;   
  text-align: center;
}

thead
{
    /*font-size: medium;*/
    font: large, bold;
    text-align: center;
}

我不确定为什么样式表仅在我输入“类别”时才有效，而当我在地址栏中键入名称时我的样式表完全被忽略（正文字体样式、表格、td、th、thead、等等...）。我错过了什么吗？

【问题讨论】：

我特意澄清了正在发生的事情......并且包括我的样式表
您确定当您输入一个名称时，您的服务器日志中没有为样式表请求提供 404？

标签： c# asp.net html asp.net-mvc

【解决方案1】：

../../Content/Test.css是一个相对URI，意思是“在当前位置的父文件夹的父文件夹中查找一个名为Content的文件夹，并在该文件夹中找到一个名为Test.css的文件。

当您只输入一个类别时，您正在寻找名为 Content 的 Dept 文件夹的同级文件夹。当您同时输入名称时，您正在寻找 Invoice 文件夹的同级。

也许您想使用/Content/Test.css 作为样式表的路径。

【讨论】：

使用 Url.Content 引用 css。不要使用硬编码路径，因为如果您在根目录的子文件夹下发布站点，它会中断。 Url.Content 会自动处理。

【解决方案2】：

那是因为您当前的路径被视为嵌套文件夹层次结构，而相对路径根本不起作用（您的 css 正在 Dept/Invoice/Content/Test.css 或类似的东西中搜索，这显然是不正确的）。这是样式和脚本文件的常见情况，尤其是当它们放置在母版页中时。

在这种情况下正确的做法是使用Url.Content，如this thread 中所述。恕我直言，这比绝对路径更好。

【讨论】：

【解决方案3】：

改变这一行：

<link rel="Stylesheet" type="text/css" href="../../Content/Test.css" />

到这里：

<link rel="Stylesheet" type="text/css" href="<%=ResolveUrl("~/Content/Test.css") %>" />

【讨论】：