1. 首页
  2. 问答
  3. 单选按钮列表搞砸在IE

单选按钮列表搞砸在IE

2012-01-10 73 views
0

我有一个单选按钮列表：单选按钮列表搞砸在IE

<p> 
    <label for="rblIAm">I am</label> 
    <asp:RadioButtonList ID="rblIAm" ValidationGroup="RegForm" runat="server"> 
     <asp:ListItem Text="Gay" Value="Gay"></asp:ListItem> 
     <asp:ListItem Text="Bisexual" Value="Bisexual"></asp:ListItem> 
     <asp:ListItem Text="Straight" Value="Straight"></asp:ListItem> 
    </asp:RadioButtonList> 
</p>

使用CSS像这样：

label { 
    float: left; 
    width: 10em; 
    font-size: 90.9%; 
    padding-left: 1em; 
} 

input { 
    background-color: #000; 
    border: 1px solid #fff; 
    color: #fff; 
    font-size: 90.9%; 
    height: 20px; 
    clear: right; 
} 

input[type=radio] { 
    height: 11px; 
    border: none; 
    border-color: transparent; 
}

在Chrome中，它看起来罚款：

Chrome

在IE中看起来很乱：

enter image description here

有人可以解释发生了什么问题和解决办法吗？

感谢

来源

2012-01-10 DarrylGodden

+0

我的第一个想法是，它看起来像IE是呈现单选按钮作为块元素，而不是内联一个元素，你可以提供生成的HTML？ – TheLukeMcCarthy 2012-01-10 11:16:10

+0

你能重现[JSFiddle]（http://jsfiddle.net）中的错误吗？ – 2012-01-10 11:28:16

+0

什么是生成的HTML代码？这是渲染过程中最重要的部分。 这种标记在很多方面都很奇怪 - 有'

'是合适的工具，不是浮动的。浮动通常会阻止事物排队（即使Chrome渲染不够理想，线条也不会，呃，直线）。 – 2012-01-10 11:31:12

回答

0

好吧，剥离它，并重新创建更清晰（我希望）类，现在在所有浏览器中工作正常。 CSS：

fieldset

{ margin：1em 0; padding：1em; border：0px solid #ccc; 背景：＃000; }

legend { font-weight：bold; text-transform：大写; }

label.label { display：block; float：left; 宽度：10em; }

textarea { width：157px; height：125px; background-color：＃000; border：1px solid #fff; color：#fff; font-size：90.9％; font-family：Arial; }

select.birthday { width：52px; background-color：＃000; border：1px solid #fff; color：#fff; font-size：90.9％; }

select.ddl { width：162px; background-color：＃000; border：1px solid #fff; color：#fff; font-size：90。9％; }

输入[类型= “文本”] { 宽度：160像素; background-color：＃000; border：1px solid #fff; color：#fff; font-size：90.9％; }

。右输入 { 宽度：100％; text-align：right; }

形式：

<asp:UpdatePanel ID="upEnquiryForm" runat="server"> 
      <ContentTemplate> 
       <fieldset> 
        <legend class="no-display">Hello</legend> 
        <p> 
         <label class="label" for="txtFirstName">Name</label> 
         <asp:TextBox ID="txtFirstName" ValidationGroup="RegForm" MaxLength="25" runat="server"></asp:TextBox> 
         <asp:RequiredFieldValidator ID="rfvName" ControlToValidate="txtFirstName" Text="*" CssClass="validation-error" 
          Display="Dynamic" ValidationGroup="RegForm" runat="server"></asp:RequiredFieldValidator> 
        </p> 

        <p> 
         <label class="label" for="txtLastName">Name</label> 
         <asp:TextBox ID="txtLastName" ValidationGroup="RegForm" MaxLength="25" runat="server"></asp:TextBox> 
         <asp:RequiredFieldValidator ID="rfvLastName" ControlToValidate="txtLastName" Text="*" CssClass="validation-error" 
          Display="Dynamic" ValidationGroup="RegForm" runat="server"></asp:RequiredFieldValidator> 
        </p> 

        <p> 
         <label class="label" for="txtEmail">Email</label> 
         <asp:TextBox ID="txtEmail" ValidationGroup="RegForm" MaxLength="50" runat="server"></asp:TextBox> 
         <asp:RequiredFieldValidator ID="rfvEmail" ControlToValidate="txtEmail" Text="*" CssClass="validation-error" 
          Display="Dynamic" ValidationGroup="RegForm" runat="server"></asp:RequiredFieldValidator> 
         <asp:RegularExpressionValidator ID="revEmail" ControlToValidate="txtEmail" Text="*" CssClass="validation-error" 
          Display="Dynamic" ValidationExpression="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" 
          ValidationGroup="RegForm" runat="server"></asp:RegularExpressionValidator> 
        </p> 

        <p> 
         <label class="label" for="txtPostcode">Postcode</label> 
         <asp:TextBox ID="txtPostcode" ValidationGroup="RegForm" MaxLength="10" runat="server"></asp:TextBox> 
         <asp:RequiredFieldValidator ID="rfvPostcode" ControlToValidate="txtPostcode" Text="*" CssClass="validation-error" 
          Display="Dynamic" ValidationGroup="RegForm" runat="server"></asp:RequiredFieldValidator> 
        </p> 

        <p> 
         <label class="label" for="txtBirthday">Birthday</label> 
         <asp:DropDownList ID="ddlDay" ValidationGroup="RegForm" AppendDataBoundItems="true" CssClass="birthday" runat="server"> 
          <asp:ListItem Text="--" Value="0"></asp:ListItem> 
         </asp:DropDownList> 
         <asp:DropDownList ID="ddlMonth" ValidationGroup="RegForm" CssClass="birthday" runat="server"> 
          <asp:ListItem Text="--" Value="0"></asp:ListItem> 
         </asp:DropDownList> 
         <asp:DropDownList ID="ddlYear" ValidationGroup="RegForm" CssClass="birthday" runat="server"> 
          <asp:ListItem Text="--" Value="0"></asp:ListItem> 
         </asp:DropDownList> 
        </p> 

        <p> 
         <label class="label" for="gender">Gender</label> 
         <asp:DropDownList ID="Gender" CssClass="ddl" runat="server"> 
          <asp:ListItem Text="-- select --" Value="Did not say"></asp:ListItem> 
          <asp:ListItem Text="Male" Value="Male"></asp:ListItem> 
          <asp:ListItem Text="Female" Value="Female"></asp:ListItem> 
         </asp:DropDownList> 
        </p> 

        <p> 
         <label class="label" for="iam">I am</label> 
         <asp:DropDownList ID="Iam" CssClass="ddl" runat="server"> 
          <asp:ListItem Text="-- select --" Value="Did not say"></asp:ListItem> 
          <asp:ListItem Text="Straight" Value="Straight"></asp:ListItem> 
          <asp:ListItem Text="Gay Male" Value="Gay Male"></asp:ListItem> 
          <asp:ListItem Text="Lesbian" Value="Lesbian"></asp:ListItem> 
          <asp:ListItem Text="Trans Gender" Value="Trans Gender"></asp:ListItem> 
          <asp:ListItem Text="Bisexual" Value="Bisexual"></asp:ListItem> 
          <asp:ListItem Text="Queer" Value="Queer"></asp:ListItem> 
          <asp:ListItem Text="Do not want to disclose" Value="Do not want to disclose"></asp:ListItem> 
         </asp:DropDownList> 
        </p> 

        <p> 
         <label class="label" for="txtMobile">Mobile</label> 
         <asp:TextBox ID="txtMobile" ValidationGroup="RegForm" MaxLength="12" runat="server"></asp:TextBox> 
        </p> 

        <p> 
         <label class="label" for="txtEnquiry">Enquiry</label> 
         <asp:TextBox ID="txtEnquiry" ValidationGroup="RegForm" TextMode="MultiLine" Rows="5" Columns="10" runat="server"></asp:TextBox> 
        </p> 

        <p class="right-input"> 
         I agree to the <a id="termsandconditions" href="Terms.htm">terms &amp; conditions</a> 
         <asp:CheckBox ID="chkAgreeTerms" ValidationGroup="RegForm" CssClass="checkbox" runat="server" /> 
        </p> 

        <p class="right-input"> 
         Receive the latest offers by email<asp:CheckBox ID="chkAgreeEmail" Checked="true" CssClass="checkbox" runat="server" /> 
        </p> 
        <p class="right-input"> 
         Receive the latest offers by SMS<asp:CheckBox ID="chkAgreeSMS" Checked="true" CssClass="checkbox" runat="server" /> 
        </p> 

        <p class="right-input"> 
         <asp:ImageButton ID="imbSubmit" ImageUrl="~/images/forms/submit-button.png" ValidationGroup="RegForm" 
          OnClick="imbSubmit_Click" CssClass="submit" runat="server" /> 
         <asp:ImageButton ID="imbSkip" ImageUrl="~/images/forms/skip-button.png" OnClick="imbSkip_Click" 
          CssClass="submit" runat="server" /> 
        </p> 

        <p> 
         <asp:Label ID="lblMessage" runat="server"></asp:Label> 
        </p> 
       </fieldset> 
      </ContentTemplate> 
     </asp:UpdatePanel>

感谢所有帮助。

来源

2012-01-18 09:42:29 DarrylGodden

0

输入和标签尝试CSS“显示：inline-block的”

来源

2012-01-10 11:21:43

0

我得说实话，我失去了我的抹布与它改成了一个下拉列表。 IE/Chrome/FF/Safari/Opera无法对他们的行为进行排序，完全让我吃惊。

来源

2012-01-16 10:58:39 DarrylGodden

相关问题

 相关问题