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中看起来不错：

Chrome

在IE中它看起来搞砸了：

enter image description here

有人可以解释出现了什么问题吗？

由于

Answer 1

尝试输入css并标记“display：inline-block”

Answer 2

我必须说实话，我丢失了我的抹布并将其更改为下拉列表。 IE / Chrome / FF / Safari / Opera无法彻底解决他们的行为。

Answer 3

好的，将它剥离并重新创建了更清晰（我希望）的类，现在可以在所有浏览器中正常运行。 CSS：

fieldset

{ 保证金：1em 0; 填充：1em; border：0px solid #ccc; 背景：＃000; }

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

label.label { 显示：块; 向左飘浮; 宽度：10em; }

textarea的 { 宽度：157px; 身高：125px; 背景色：＃000; border：1px solid #fff; 颜色：#fff; font-size：90.9％; font-family：Arial; }

select.birthday { 宽度：52px; 背景色：＃000; border：1px solid #fff; 颜色：#fff; font-size：90.9％; }

select.ddl { 宽度：162px; 背景色：＃000; border：1px solid #fff; 颜色：#fff; font-size：90.9％; }

输入[类型= “文本”] { 宽度：160px; 背景色：＃000; border：1px solid #fff; 颜色：#fff; font-size：90.9％; }

.right-输入 { 宽度：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>

感谢所有帮助。

RadioButtonList在IE中搞砸了

3 个答案: