控件样式被覆盖答案

【问题标题】：Control style overridden控件样式被覆盖
【发布时间】：2013-07-19 19:22:12
【问题描述】：

我有以下 ASP.Net 代码

...
<div style="width: 40%; float: left; margin-left: 15px">
    <b>County:</b>
    <asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
    AutoCompleteMode="SuggestAppend" CssClass="EPSCombo">
    </asp:ComboBox>
    <br />
...

问题： 这个 div 包含许多组合框，它们没有按预期显示，它们都有 EPSCombo 类。当我调试 CSS 时，我发现它被覆盖了，这是 FireBug 的输出

我的EPSCombo样式如下（覆盖默认的AjaxToolkit CSS）

.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    height: 18px;
}
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    margin: 0;
    padding: 0;
    background-image: url(../images/windows-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 21px;
    width: 21px;
}
.EPSCombo .ajax__combobox_itemlist
{
    border-color: #7F9DB9;
}

包含 EPSCombo 的 CSS 文件是母版页中包含的最后一个。

问题：我可能已经有一段时间没有进行 Web 开发了，但是如果我决定控件的 CSS 类不应该具有最高优先级，并且应该覆盖其他所有内容，对吗？如果是这样，那么为什么我的组合框样式（高度、宽度、边距和填充）被覆盖了？我没有任何其他样式类可以为 Firebug 中显示的值设置高度和宽度。

更新在 Loki 的回答之后我想我应该添加这个，在这些属性中添加 !important 可以解决问题，但我想找到这个问题的根本原因，看看哪里出了问题.

【问题讨论】：

如您所见，被覆盖的样式是行内的，行内样式具有最高优先级，因此您需要检查您的代码，可能是您在代码中行内添加这些样式，或者可能正在使用 java 脚本。
我有这个顾虑，但正如我所说，我没有任何其他地方可以分配这些特定值，同样在我的问题中，我只显示一个组合框，但 Div 有更多，每个它们具有不同的价值。在我的 JS 中，我通常不会更改 CSS 的控件。有没有办法可以搜索或找出我的控件样式是否被 JS 修改？
@JafarKofahi 如果您有权访问 .js 文件 - 您可以搜索类名或元素标签并查看正在对它们执行的操作
@Loki 谢谢你的想法，我刚刚检查了所有的JS，唯一受JS影响的元素样式是a。所以看起来它纯粹是 CSS 问题
@JafarKofahi 给您留下了两个选择：要么是某人编写内联样式，要么您正在接收（AJAX 建议）具有内置内联样式的 html 元素。这不是 CSS 造成的问题确定文件

标签： asp.net css styles

【解决方案1】：

您的 ComboBox 可能从它所包含的 <div> 或更高的 div 继承它的样式。由于您没有为包含在其中的 div 指定“类”或“ID”属性，如果您有类似的内容，该 div 可能正在从您的 CSS 文件中检索样式：

div
{
  height: 21px;
  margin: 0px;
  padding: 0px;
  width: 21px;
}

要强制您的 ComboBox 采用独立样式，尽管您可以像这样使用 asp style 属性：

<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>

这应该是任何其他可能干扰您的应用程序的样式的最高优先级。虽然被认为是不正确的编程实践，但它可以帮助您缩小问题范围。

干杯，埃里克

编辑我还应该提到，您的 CSS 代码是按照从最具体到最不具体的标签定义的顺序进行解释的。例如，div.menu 比 div 更具体，这可能发生在样式表的其他地方。

This 也是一篇描述继承的好文章。希望这会有所帮助！

【讨论】：

很有趣，所以继承的样式会覆盖给定的 CssClass？我将阅读有关继承的内容..谢谢
+1 @Eric 指出继承..这是问题的一半。下半场我还在想办法。宽度和高度都在某处计算并分配为 HTML 输出中的内联值

【解决方案2】：

快速修复 - 在样式表中添加 !important 标志。除非有其他标志定义了相同元素的相同属性，否则它们将比其他所有内容具有更高的优先级

【讨论】：

是的，添加!important 可以解决这个问题，但我不想每次都添加它。我想找出它发生的原因：我的 CSS 文件是不是搞砸了，是我还是我团队中的任何人在 JS 中做一些样式而没有意识到它，......等等，但是谢谢