母版页 CSS 文件与 HTML 等效文件没有正确链接答案

【问题标题】：Masterpage CSS file not linking correctly versus HTML equivalent母版页 CSS 文件与 HTML 等效文件没有正确链接
【发布时间】：2015-05-08 14:34:18
【问题描述】：

我有一个小问题。我将一个 div 放在一个没有 masterpage 的 html 中，它工作得很好 - css 工作，但是当我把它放在一个带有 masterpage 的 html 中时它没有。 CSS：

@import url(http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);

.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
overflow: hidden;
}

hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255,255,255,.1);
}

div.title { font-size: 2em; }

h1 span {
font-weight: 300;
color: #Fd4;
}

div.stars {
width: 270px;
display: inline-block;
}

input.star { display: none; }

label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}

input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}

input.star-5:checked ~ label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
content: '\f006';
font-family: FontAwesome;
}

没有母版页的html：

<head runat="server">
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/fontawesome/4.2.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="stars" >
  <input class="star star-5" id="star5" type="radio" name="star" runat="server"/>
  <label class="star star-5" for="star5"></label>
  <input class="star star-4" id="star4" type="radio" name="star" runat="server"/>
  <label class="star star-4" for="star4"></label>
  <input class="star star-3" id="star3" type="radio" name="star" runat="server"/>
  <label class="star star-3" for="star3"></label>
  <input class="star star-2" id="star2" type="radio" name="star" runat="server"/>
  <label class="star star-2" for="star2"></label>
  <input class="star star-1" id="star1" type="radio" name="star" runat="server"/>
  <label class="star star-1" for="star1"></label>
  </div>

</form>
</body>
</html>

带有母版页的html：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <div class="stars" >
  <input class="star star-5" id="star5" type="radio" name="star" runat="server"/>
  <label class="star star-5" for="star5"></label>
  <input class="star star-4" id="star4" type="radio" name="star" runat="server"/>
  <label class="star star-4" for="star4"></label>
  <input class="star star-3" id="star3" type="radio" name="star" runat="server"/>
  <label class="star star-3" for="star3"></label>
  <input class="star star-2" id="star2" type="radio" name="star" runat="server"/>
  <label class="star star-2" for="star2"></label>
  <input class="star star-1" id="star1" type="radio" name="star" runat="server"/>
  <label class="star star-1" for="star1"></label>
 </div>

</asp:Content>

不应该是这样的：

源代码（母版页）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk3NjIwNTUxMGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgUFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjUFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjQFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjMFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjIFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjFwT8uSu9sOfORC1N0/HVYkxqPn1CouicTkSUkSxVv1uA==" />
</div>

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="9397DC0D" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAcCx8QyBKNwgVY6o3mkNcKvfQCB0pUsOJpy4fnv8J365PqbTooLxpm6rqKM1qnpL0WKM6j7xyqFjsDqMxeM+3DfnbRT9DeSeStRy6aSOUv9JHI5MYLCO3LtU7cAJVvEBlyMO7fmjkJSfq6Zbgk2kTWnqiOGYOCf0K23WNfp2M1RTaC01aLKYB4/+EAAYp0t4jA=" />
</div>
<div>

<div class="stars" >
  <input value="star5" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star5" class="star star-5" />
  <label class="star star-5" for="star5"></label>
  <input value="star4" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star4" class="star star-4" />
  <label class="star star-4" for="star4"></label>
  <input value="star3" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star3" class="star star-3" />
  <label class="star star-3" for="star3"></label>
  <input value="star2" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star2" class="star star-2" />
  <label class="star star-2" for="star2"></label>
  <input value="star1" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star1" class="star star-1" />
  <label class="star star-1" for="star1"></label>
</div>
<br />
<input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Button" id="ContentPlaceHolder1_Button1" />
<span id="ContentPlaceHolder1_Label1">Label</span>
<br />

</div>
</form>
</body>
</html>

母版页的html不做黄色部分..我该怎么办？

谢谢你:)

【问题讨论】：

这是母版页的 ASP。你能展示下浏览器的实际 HTML 吗？
对不起，我不太明白.. 你要我给屏幕拍照吗？ :)
没有。查看源代码。发布它来代替 ASP 或作为 ASP 的补充。
这是我的观点，我与 Visual Studio Web Developer 合作...
Visual Studio Web Developer 不是浏览器。 ASP 不是 HTML。在某些时候，这将是一个网页，在 HTML 中，在浏览器中查看（否则，为什么要构建它）？在浏览器中访问该页面，查看 ASP 为您创建的 HTML，然后在此处发布。否则，有太多可能的变量无法猜测——我们看不到问题所在，甚至看不到演示问题的 HTML。

标签： html css master-pages

【解决方案1】：

在我看来，您的 css 文件的路径在母版页上不正确。

您的母版页或 css 文件或 aspx 是否位于单独的文件夹中？如果是这样，您应该在 masterpage 文件中链接 css 文件：

<link rel="Stylesheet" href="~/StyleSheetStars.css" type="text/css" runat="server" />

~/ 指向应用程序的根目录。同样，这取决于您的目录结构，但我有预感这是您问题的根源。您还需要runat="server" 属性。

请注意，~/ 在传统 HTML 中不起作用，但在 aspx 文件中使用时是有效路径。

请查看类似的 SO 问题here。

【讨论】：

非常感谢您的回答，但仍然无法正常工作。 :( 一些 css 属性正在工作，例如：悬停正在工作（星星在移动）但填充没有（它们不会涂成黄色）.. 就像母版页决定忽略一些 css 代码......
在您的浏览器中按 F12（IE、Chrome），您可以在资源选项卡或类似选项卡中查看 css 文件是否正确链接。如果已加载，则您的 css 可能还有其他问题。例如，如果您的黄色星星是图像，则图像的路径可能不正确。对于 CSS，img 路径是相对于 CSS 文件的，而不是实际页面。（即../images/sample.png 而不是images/sample.png 或类似的）
正如我所见，css 正在工作除了那部分： input.star-5:checked ~ label.star:before { color: #FE7;文字阴影：0 0 20px #952; } input.star-1:checked ~ label.star:before { color: #F62; } 你知道为什么除了这些行之外一切正常吗？