RadioButtonList испортил в IE

Question

У меня есть RadioButtonList:

<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 все выглядит отлично:

В IE это выглядит запутанно:

Может кто-нибудь объяснить, что идет не так, и исправить?

Спасибо

Answer 1

Я должен быть честным, я потерял свою тряпку и изменил ее на выпадающий список.Совершенно очевидно, что IE / Chrome / FF / Safari / Opera не могут разобраться в их действиях.

Answer 2

Хорошо, удалили его и заново создали с более ясными (я надеюсь) классами, которые теперь отлично работают во всех браузерах.CSS:

fieldset

{margin: 1em 0;набивка: 1em;граница: 0px solid #ccc;фон: # 000;}

legend {font-weight: bold;преобразование текста: верхний регистр;}

label.label {display: block;плыть налево;ширина: 10em;}

textarea {width: 157px;высота: 125 пикселей;цвет фона: # 000;граница: 1px solid #fff;цвет: #fff;размер шрифта: 90,9%;семейство шрифтов: Arial;}

select.birthday {width: 52px;цвет фона: # 000;граница: 1px solid #fff;цвет: #fff;размер шрифта: 90,9%;}

select.ddl {width: 162px;цвет фона: # 000;граница: 1px solid #fff;цвет: #fff;размер шрифта: 90,9%;}

input [type = "text"] {width: 160px;цвет фона: # 000;граница: 1px solid #fff;цвет: #fff;размер шрифта: 90,9%;}

.right-input {width: 100%;выравнивание текста: справа;}

Форма:

<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>

Спасибо всем, кто помог.

Answer 3

Попробуйте css для ввода и метки "display: inline-block"