CSS 在 ASP.NET 中不起作用答案

【问题标题】：CSS not working in ASP.NETCSS 在 ASP.NET 中不起作用
【发布时间】：2011-06-10 07:35:03
【问题描述】：

我用 HTML 创建了一个简单的页面，效果很好。但是当我将它导入 ASP.NET 时，页面设计变得混乱。

这是我的Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Elite.WUI.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ContentPlaceHolder ID="headerCPH" runat="server">
        <div id="header">
            <h1>WUI</h1>
        </div>
        <hr />
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="navigationCPH" runat="server">
        <div id="navigation">
            <ul>
                <li>Home</li>
                <li>Users</li>
                <li>Campaigns</li>
                <li>Settings</li>
            </ul>
        </div>
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="contentCPH" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

我的样式表styles.css

#navigation
{
    float: left;
    border: 1pt solid;
}

#navigation ul
{
    list-style-type: none;
    padding: 5 5 5 5;
    margin: 0;
}

#content
{
    margin-left: 9%;
    border: 1pt solid;
    padding-left: 5;
}

以及从母版页派生的实际页面

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ABC.aspx.cs" Inherits="Elite.WUI.ABC" %>
<asp:Content ID="Content3" ContentPlaceHolderID="contentCPH" runat="server">
    <div id="content">
        <p>Test content</p>
    </div>
</asp:Content>

这是它在 Firefox (ver 3.6) 中的显示方式

正如您所见，border、list-style-type 属性可以正常工作，但 margin 不能正常工作。谁能告诉我我做错了什么？我已经在谷歌浏览器中测试过，但同样的问题。当没有 ASP.NET 即简单的 .html 文件时，HTML 和 CSS 可以正常工作。

【问题讨论】：

您是否查看过使用 Firefox 中的 FireBug 或 Chrome 中的元素检查器的页面？看看派生的 CSS 状态是什么，我相信这会为您指明正确的方向。
提示：通过在浏览器中执行“查看源代码”来查看最终代码。实际标记可能与您预期的不同。
我在 Firebug 和实际源代码（在浏览器中）都看过它，但我没有发现任何不正确的地方:(
有点不相关，我可能错了，但<asp:Content> 标记在母版页中不应该为空，因为它的内容可以在派生的页面中被覆盖吗？
@Dan：如果你说的是asp:ContentPlaceHolder，我只想在派生页面中覆盖最后一个 contentPlaceHolder，所以我把它留空了。

标签： asp.net css css-selectors

【解决方案1】：

编辑：按照 cmets 中的建议，我检查了静态 HTML 文件的源以及由 ASP.NET 生成的源，发现差异不大

ASP.NET 源代码中<ul> 的 CSS 是

div#navigation ul {
list-style-type: none;
margin: 0px;
}

在静态文件中是

#navigation ul {
list-style-type: none;
margin: 0px;
padding: 5px;
}

注意padding的区别（ASP.NET源码中缺失）

同样，在 content div 中，ASP.NET 源代码中缺少 padding-left。但是，AFAIK，这应该没关系。问题是甚至没有将 margin 属性应用于 div。

P.S：我无法编辑问题，因为我没有足够的代表，并且有人在帖子中添加了图片（它不允许我发布图片。）

【讨论】：

【解决方案2】：

改变

padding-left: 5;

到

padding-left: 5px;

和

padding: 5 5 5 5;

到

padding: 5px 5px 5px 5px;

注意：最后一个也可以写成：padding:5px;

【讨论】：

天哪，做到了 :) 那么我们可以得出结论，ASP.NET 不会处理没有单位的值吗？
@Tux 它不是 ASP.NET，这是一个浏览器问题。我不明白它在您的普通 HTML 页面中是如何工作的。你确定里面没有单位吗？