添加 runat=server 导致 css 不被应用答案

【问题标题】：adding runat=server causing css not be applied添加 runat=server 导致 css 不被应用
【发布时间】：2018-08-09 13:46:33
【问题描述】：

我将runat="server" 添加到我的.ascx 文件中的div 之一。

<div id="logo" runat="server">

这会将最终的 HTML 更改为以下内容。注意mainheader1 是如何插入的

<div id="mainheader1_logo">

我阅读了这个问题 https://stackoverflow.com/a/897790/886569 并对 html 进行了更改

<div id="logo" class="logo" runat="server">

这会导致最终的 HTML 为

<div id="mainheader1_logo" class="logo">

在我的 CSS 中，logo 类是这样定义的：

#logo
{
    position:absolute;
    left:0px;
    top:78px;
    width:396px;
    height:50px;
}

如何以安全的方式解决此问题？我不想在我的 CSS 文件中添加组件名称，因为这看起来很脏。也不想将# 更改为.，因为这可能会破坏很多其他东西。

【问题讨论】：

您是否在 ASPX 页面中找到了某个名为 mainheader1 的控件？如果不检查其他 HTML 元素，我们不知道自动生成的 mainheader1 来自哪里。
我正在使用母版页。就是它的名字。
此问题可能来自母版页的命名容器，如 here 所述。您是否已经尝试使用ClientIDMode="Static"？
另外，还要检查 controlRenderingCompatibilityVersion 是否存在于 web.config 中，并告诉它当前具有什么值（似乎您正在使用 3.5 模式）。
您刚刚偶然发现了 asp.net webforms name mangling。这种行为背后其实有合理的原因。要么通过 ClientIDMode 接受 Tetsuyas 的建议，使用 class 而不是 id，或者，最激烈的措施，转移到 MVC。

标签： css asp.net

【解决方案1】：

如下更新你的 CSS。 CSS 选择器[id$="logo"] 将选择每个具有id ends with "logo" 的元素。

[id$="logo"]
{
    position:absolute;
    left:0px;
    top:78px;
    width:396px;
    height:50px;
}

【讨论】：