5

我有一个问题，当我编译 MVC 项目并在 [https://localhost/MyApp.] 上查看它时，CSS 没有正确呈现。按钮和背景图像没有显示。它工作了一次，然后由于某种原因它停止工作。页面没有缓存的东西？我使用firebug检查页面是否丢失，没有发现错误。Visual Studio 2010 设置中的某些内容需要更改或 IIS？

但是，当我使用我在 IIS 7.5 中设置的 [https://localhost:444] 网站而不是在（默认网站）区域中将它发布到单个网站时，css 似乎渲染得很好。

问题是什么？

4

4 回答 4

5

MVC 4 网站上发生的一个常见问题是当您拥有 css 包时发布和调试之间的差异。不一定是你的情况，但你有症状。

我将举例说明。

如果您有如下所示的捆绑包：

var styles = new StyleBundle("~/Content/css").Include(
            "~/Content/toastr.css",
            "~/Content/flags/stylesheets/flags16.css",
            "~/Content/flags/stylesheets/flags32.css",
            "~/Content/Site.css")

在 flags16.css 你有：

background:url('flags/images/flags16.png');

其中使用文件~Content/flags/images/flags16.png

这将在发布模式下工作（web.config 中的编译调试 =“false”），因为捆绑中的所有 css 文件都将作为 1 个文件提供，~/Content/css其相对路径'flags/images/flags16.png'指向正确的文件。但是，在调试模式下，ASP.NET MVC 将禁用缩小，如果您@Styles.Render("~/Content/css")在视图中使用，它将呈现指向捆绑包中包含的每个文件的链接，因此会有：

<link href="/WorkOrders.Web/Content/flags/stylesheets/flags16.css" rel="stylesheet">

并且从该路径开始，图像的相对路径不正确，因此 flags16.png 中的图像将不会被渲染。

解决此问题的一种方法是，您需要将包含对图像的引用的 .css 文件移动到 bundle 指向的位置（在本例中为 ~/Content），因此在提供缩小和原始文件时它将具有相同的路径。

更新由于您的应用程序不是 mvc4，并且当您的应用程序不在您网站的根目录中时（即当它在 localhost/myapp 中时）您会遇到问题，那么您需要检查对图片的引用中的路径。您可能绝对引用了它们 ( '/somepath/mypic.png')，当您的应用位于 时localhost/MyApp，路径需要为localhost/MyApp/somepath/mypic.png. @Url.Content(~/somepath/mypic.png)如果您从 cshtml 使用它，您可以通过将路径替换为 来解决这个问题。如果路径在 css 中，那么您需要将相对路径放置到您的图片中。

于 2013-01-20T23:00:22.223 回答
5

我一直在与同样的问题作斗争 - 找不到或渲染图像、脚本和 css。（Visual Studio 2013，Windows 8.1。项目从 Visual Studio 2010 转移。）

问题是由 Web.config 中的一行引起的：

<mimeMap fileExtension=".mp4" mimeType="video/mp4" />

似乎因为 IIS Express application.host 文件已经包含了这个 mimeMap 定义，IIS Express 无法应对再次定义它。

从 Web.config 中删除这一行完全解决了这个问题。

于 2015-07-31T15:42:57.447 回答
1

看起来您的网站已配置为使用 SSL。除了在本地运行时，您可能没有证书颁发机构信任的有效 SSL 证书，并且客户端浏览器拒绝下载静态资源。解决此问题的一种方法是将地址添加为受信任的。因此，将 URL 复制粘贴到浏览器地址栏中的一些 CSS 文件中：

https://localhost/MyApp/Content/Main.css

您将看到有关无效证书的警告，您可以通过向浏览器添加例外来忽略该警告。添加异常后点击Ctrl+F5强制刷新，您的应用程序应该开始正常工作。

于 2013-01-21T09:49:15.673 回答
0

当我遇到这个问题时，我发现我的所有 CSS 和脚本文件在浏览器 (Firefox 33.0.2) 中下载时都遇到了 HTTP 500 错误。

在任务管理器中杀死我的浏览器实例，然后重新开始为我解决了这个问题。

于 2015-12-04T16:08:45.993 回答