【发布时间】:2013-10-20 01:06:30
【问题描述】:
我的一个样式表似乎并未加载所有样式。我已经阅读了我能找到的所有内容,但人们通常遇到的问题对我来说是显而易见的事情,但我似乎无法弄清楚我自己的问题。我有一个使用 Razor 制作的网站,这就是我在 head 部分中调用我的样式表的地方。
<link href="@Url.Content("~/css/reset.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/jquery-ui-1.10.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/searchLayout.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/searchSkin.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/skin.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/AvailabilityLayout.css")" rel="stylesheet" type="text/css" media="screen" />
<link href="@Url.Content("~/css/AvailabilitySkin.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="@Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
问题似乎出在 AVailabilitySkin.css 上,有时还出在 AvailabilityLayout.css 上。例如,我在 AvailibilitySkin.css 中有这段代码:
td#price h2, td#price h4
{
text-align:center;
}
而且它没有被拾取,我什至没有看到它被另一种风格或任何东西覆盖。但是,如果我将相同的代码添加到 Skin.css 文件中,那么它工作得非常好。我不能将我所有的样式都添加到 Skin.css 中,所以我不能只是把那个样式放在那里然后收工。它必须分开,现在该网站正在本地开发,所以很遗憾我无法发布该网站的链接,但如果需要任何东西(如更多代码),请告诉我。我找不到问题,我尝试添加 @charset "UTF-8";在样式表的顶部,它并没有真正做太多。
【问题讨论】:
-
可能有争议,但首先我会更改您的命名约定并避免大写。您说 AVailabilitySkin,注意 AV 与下一期样式表、Av 等不同。删除大写字母并尝试使用 td#price h2, td#price h4 {text-align:center !important;} 看看您是否找到了正确的目标以及是否所以无论你是否被另一个样式表取代。
-
你在做html/css。您应该尝试遵守标准...不要大写,使用
-分隔单词,依此类推...此外,您是否有(非)工作示例可供查看?您应该查看检查器以查看样式表是否至少已加载。 -
Firefox 控制台中是否有任何与 CSS 相关的错误?
-
我似乎没有发现任何与 CSS 相关的错误。我总是在检查员测试和编辑东西,样式没有被覆盖,它们没有被加载。 @JonPaulH 我已经更新了我的命名约定,而 AV 实际上只是我在这里打的一个错字。我试过 !important 但它不起作用,即使它在 Chrome 中工作得很好。这些样式被忽略了,因为样式表的一部分确实加载了,所以我不确定这是否是一个错误或如何强制页面加载。就像我说的,如果我复制/粘贴到 skin.css 中,它可以工作,所以它应该在任何其他样式表中工作。
-
实际上@BorisZbarsky,更正。 Firefox 控制台中有错误,但它们不适用于我需要的样式,它们主要用于某些供应商特定的样式。 -moz-box-shadow 和 -moz-border-radius,以及由于某种原因导致的一些解析错误,例如错误正在解析这样编写的样式的边距:
#maxHeader { margin-left: -3px; padding: 10px 12px 10px 11px; }
标签: css firefox razor stylesheet loading