Question

我有一个类似于下面的字段集，以及一个适用于所有字段集的通用css。我正在使用ie浏览器。当我给出fieldset的“margin-bottom：2px”内联时，它不会覆盖fieldset #count div class property margin-bottom：6px to margin-bottom：2px。

我是否需要为字段集内联添加更多内容？

<fieldset id="counts" style="margin-bottom: 2px">
 <div runat="server" id="div1">
     <asp:RadioButtonList ID="radioButtonList" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="Yes" Text="Yes" />
                            <asp:ListItem Value="No" Text="No" />
                        </asp:RadioButtonList>
  </div>
 <div id="div2" runat="server">
     <radC:RadComboBox ID="list" runat="server"/>
 </div>
</fieldset>

fieldset#counts div
{
    margin-bottom: 6px;
}

Answer 1

它不应该覆盖6px属性。它们针对的是两个不同的元素。

fieldset#counts div

定位 <fieldset>内的div ，您的内联样式定位<fieldset>元素本身。

结果是<fieldset>的余量低于2px，而且其中的<div>两个都有6px的余量。

要对其进行排序，您的结果是：

<fieldset id="counts" style="margin-bottom: 2px"> <div runat="server" id="div1"> </div> | <-- 6px margin <div id="div2" runat="server"> </div> | <-- 6px margin </fieldset> | <-- 2px margin

基于评论的补充答案：

如果您希望fieldsets元素中的最后一个div具有2px边距而不是6px，那么您可以在CSS中执行以下任一操作：

#div2 { margin-bottom: 2px; }

-OR -

fieldset#counts div:last-child { margin-bottom: 2px; }

Answer 2

尝试在css id中提供所有内容，如：

<fieldset id="counts" >
 <div runat="server" id="div1">
     <asp:RadioButtonList ID="radioButtonList" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="Yes" Text="Yes" />
                            <asp:ListItem Value="No" Text="No" />
                        </asp:RadioButtonList>
  </div>
 <div id="div2" runat="server">
     <radC:RadComboBox ID="list" runat="server"/>
 </div>
</fieldset>


#count {margin-bottom: 2px;}
#count div {margin-bottom: 6px;}

fieldset内联样式不起作用（IE）

2 个答案: