0

次の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 ファイルは、マスター ページに含まれる最後の CSS ファイルです。

質問: Web 開発を始めてからしばらく経っていたかもしれませんが、コントロールの CSS クラスを最優先すべきではなく、他のすべてをオーバーライドする必要があると判断した場合、正しいですか? もしそうなら、なぜ私のコンボボックスのスタイル ( Height、Width、margin、および padding ) がオーバーライドされているのですか?? Firebug に示されている値の高さと幅を設定するスタイル クラスは他にありません。

Loki's answer after update私はこれを追加するべきだと思っ!importantた.

4

2 に答える 2

3

ComboBox は、<div>それが含まれているか、それよりも高い div からスタイルを継承している可能性があります。含まれている div の 'class' または 'ID' 属性を指定していないため、次のような場合、その div は CSS ファイルからスタイルを取得している可能性があります。

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

style次のように asp 属性を使用できますが、ComboBox に独立したスタイルを強制するには:

<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。これは、スタイルシートの別の場所で発生している可能性があります。

これは、継承について説明する良い記事でもあります。お役に立てれば！

于 2013-07-19T19:39:41.420 に答える
1

簡単な修正 -!importantスタイルシートにフラグを追加します。まったく同じ要素のまったく同じプロパティを定義する他のフラグがない限り、それらは他のすべてよりも優先されます

于 2013-07-19T19:32:11.443 に答える