IE支持白色空间：nowrap

Question

我有一些代码，我想使用白色空间：nowrap for。我在字段验证期间出现了一个标签，在HTML中看起来像这样。

标签只是一个复选标记。我希望复选标记出现在输入字段旁边。

 <label for="LName_Ship" class="error valid"></label>

标签的CSS是：

label.valid {
    background: url('/images/art/checked.gif') no-repeat;
    display: block;
    width: 16px;
    height: 16px;
}

CSS是针对白色空间的。这适用于Chrome，并将Checkmark与输入内联，但不在IE中。我需要它在IE中工作：

 .form-horizontal .controls {
      white-space: nowrap;
 }

HTML非常庞大，所以我很抱歉......

<div class="span9" id="CheckoutProcess">

        <div class="checkoutsteptitle down" id="Step1">Step 1: Checkout Options
        </div>
        <div class="checkoutstep">
            <div><h2><span id="LoginLink" style="color:#335f9c;text-decoration:underline;cursor:pointer;">Login</span> to your account or choose an option below:</h2></div>
            <section class="returncustomer" id="returncustomer" style="display:none;">
                <h4 class="heading4" style="color:#f37624;">Login Below </h4>
                Sign in to speed up the checkout process.
                <div class="loginbox">
                    <form class="form-vertical" name="CustomerSignIn" id="CustomerSignIn" method="POST">
                        <input type="hidden" name="formName" value="dmiformCustomerSignIn">
                        <input type="hidden" name="action" value="email_password"> 
                        <input type="hidden" name="redirect_page" value="checkout.aspx"> 

                        <fieldset>
                            <div class="control-group">
                            <label class="control-label">Email Address:</label>
                            <div class="controls">
                            <input type="text" name="email" id="email" value="" class="span3" placeholder="example@amleo.com">
                            </div>
                            </div>
                            <div class="control-group">
                            <label class="control-label">Password:</label>
                            <div class="controls">
                            <input type="password" name="pwd" id="password" value="" class="span3">
                            </div>
                            </div>
                            <a class="forgotpassword" data-fancybox-type="iframe" href="forgotpasswordreset.aspx?ai=13" style="color:#335f9c;text-decoration:underline;cursor:pointer;">Forgot Password</a>
                            <br>
                            <br>
                            <input type="submit" value="Login" class="btn btn-orange">
                        </fieldset>
                    </form>
                </div>
            </section>
            <section class="guestcustomer ">
                <div class="loginbox">
                <h4 class="heading4" style="color:#f37624;">Guest Customers</h4>
                <h6 class="heading6">Continue to checkout without signing in.</h6>
                <input type="Submit" id="AsGuest" class="btn btn-orange" value="CONTINUE AS A GUEST" style="margin-top:5px;">
                </div>
            </section>
            <section class="newcustomer">
                <h4 class="heading4" style="color:#f37624;">Create Account</h4>
                <div class="loginbox">
                    <form class="form-vertical validate" id="NewCustomer" name="NewCustomer" method="POST">
                        <input type="hidden" name="formName" value="dmiformNewCustomerCheckout">
                        <input type="Hidden" name="action" value="new_customer">

                    <fieldset>
                        <div class="control-group">
                        <label class="control-label">Email Address:</label>
                        <div class="controls">
                        <input type="text" class="span3" id="Email" name="Email" placeholder="example@amleo.com">
                        </div>
                        </div>
                        <div class="control-group">
                        <label class="control-label">Password:</label>
                        <div class="controls">
                        <input type="password" class="span3" id="pwd" name="pwd" maxlength="50">
                        </div>
                        </div>
                        <div class="control-group">
                        <label class="control-label">Password Confirm:</label>
                        <div class="controls">
                        <input type="password" class="span3" id="pwd_confirm" name="pwd_confirm">
                        </div>
                        </div>
                    </fieldset>
                        <div class="pull-right" id="NewPrivacyPolicy">
                            <input type="Submit" class="btn btn-orange" value="CREATE ACCOUNT" style="margin-top:5px;">
                        </div>
                    </form>
                </div>
            </section>
        </div>

        <form method="post" id="CheckOut" name="CheckOut" value="CheckOut" class="form-horizontal" novalidate="novalidate">
        <input type="hidden" name="formName" value="dmiformCheckOutHandler">



<div class="checkoutsteptitle down" id="Step2">Step 2: Enter Shipping Address

</div>
<div class="checkoutstep">
<div class="row">
<fieldset>
<div class="span4">
<div class="control-group">
<label class="control-label">First Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="FName_Ship" name="FName_Ship" value="James" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&amp;fieldname=shipfname&amp;fieldvalue=' + this.value + '&amp;extra=' + rnd() } );" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="LName_Ship" name="LName_Ship" value="Anderson" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&amp;fieldname=shiplname&amp;fieldvalue=' + this.value + '&amp;extra=' + rnd() } );" class="valid"><label for="LName_Ship" class="error valid"></label>
</div>
</div>
<div class="control-group">
<label class="control-label">Company</label>
<div class="controls">
<input type="text" id="Company_Ship" name="Company_Ship" value="" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&amp;fieldname=shipCompany&amp;fieldvalue=' + this.value + '&amp;extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">Address 1<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Address1_Ship" name="Address1_Ship" maxlength="100" value="" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&amp;fieldname=shipAddress1&amp;fieldvalue=' + this.value + '&amp;extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">Address 2</label>
<div class="controls">
<input type="text" id="Address2_Ship" name="Address2_Ship" maxlength="100" value="" onblur="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&amp;fieldname=shipAddress2&amp;fieldvalue=' + this.value + '&amp;extra=' + rnd() } );">
</div>
</div>

</div>
<div class="span4">
<div class="control-group">
<label class="control-label">City<span class="red">*</span></label>
<div class="controls">
<input type="text" id="City_Ship" name="City_Ship" value="Piqua" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&amp;fieldname=shipCity&amp;fieldvalue=' + this.value + '&amp;extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">State<span class="red">*</span></label>
<div class="controls">


<select name="State_Ship" id="State_Ship" class="required" onchange="populateShippingMethods('Default');">

        <option value=""> - Select - </option>


        <option value="AK">AK: Alaska</option>

        <option value="AL">AL: Alabama</option>

        <option value="AR">AR: Arkansas</option>

        <option value="AZ">AZ: Arizona</option>

        <option value="CA">CA: California</option>

        <option value="CO">CO: Colorado</option>

        <option value="CT">CT: Connecticut</option>

        <option value="DC">DC</option>

        <option value="DE">DE: Delaware</option>

        <option value="FL">FL: Florida</option>

        <option value="GA">GA: Georgia</option>

        <option value="HI">HI: Hawaii</option>

        <option value="IA">IA: Iowa</option>

        <option value="ID">ID: Idaho</option>

        <option value="IL">IL: Illinois</option>

        <option value="IN">IN: Indiana</option>

        <option value="KS">KS: Kansas</option>

        <option value="KY">KY: Kentucky</option>

        <option value="LA">LA: Louisiana</option>

        <option value="MA">MA: Massachusetts</option>

        <option value="MD">MD: Maryland</option>

        <option value="ME">ME: Maine</option>

        <option value="MI">MI: Michigan</option>

        <option value="MN">MN: Minnesota</option>

        <option value="MO">MO: Missouri</option>

        <option value="MS">MS: Mississippi</option>

        <option value="MT">MT: Montana</option>

        <option value="NC">NC: North Carolina</option>

        <option value="ND">ND: North Dakota</option>

        <option value="NE">NE: Nebraska</option>

        <option value="NH">NH: New Hampshire</option>

        <option value="NJ">NJ: New Jersey</option>

        <option value="NM">NM: New Mexico</option>

        <option value="NV">NV: Nevada</option>

        <option value="NY">NY: New York</option>

        <option value="OH" selected="selected">OH: Ohio</option>

        <option value="OK">OK: Oklahoma</option>

        <option value="OR">OR: Oregon</option>

        <option value="PA">PA: Pennsylvania</option>

        <option value="RI">RI: Rhode Island</option>

        <option value="SC">SC: South Carolina</option>

        <option value="SD">SD: South Dakota</option>

        <option value="TN">TN: Tennessee</option>

        <option value="TX">TX: Texas</option>

        <option value="UT">UT: Utah</option>

        <option value="VA">VA: Virginia</option>

        <option value="VT">VT: Vermont</option>

        <option value="WA">WA: Washington</option>

        <option value="WI">WI: Wisconsin</option>

        <option value="WV">West Virginia</option>

        <option value="WY">WY: Wyoming</option>

        <option value="PR">PR: Puerto Rico</option>

        <option value="NA">Not applicable</option>

        <option value="AP">APO/FPO AP</option>

        <option value="AA">APO/FPO AA</option>

        <option value="AE">APO/FPO AE</option>

        <option value="FN">FN</option>

</select>

</div>
</div>
<div class="control-group">
<label class="control-label">Zipcode<span class="red">*</span></label>
<div class="controls">
<input type="text" id="PostalCode_Ship" name="PostalCode_Ship" value="45356" onblur="populateShippingMethods('Default');">
</div>
</div>
<div class="control-group">
<label class="control-label">Country<span class="red">*</span></label>
<div class="controls">


<select name="Country_Ship" id="Country_Ship" class="required" onchange="populateShippingMethods('Default');">

        <option value="US">United States</option>


        <option value="US" selected="selected">United States</option>

</select>

</div>
</div>
<div class="control-group">
<label class="control-label">Phone<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Phone_Ship" name="Phone_Ship" value="" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&amp;fieldname=shipphone&amp;fieldvalue=' + this.value + '&amp;extra=' + rnd() } );" placeholder="8005438955">
</div>
</div>
<div class="control-group">
<label class="control-label">Your Email<span class="red">*</span></label>
<div class="controls">
<input type="text" id="E-Mail" name="Email" value=@msn.com" placeholder="example@amleo.com"> 
</div>
</div>
</div>
</fieldset>
</div>
</div>



<div class="checkoutsteptitle down" id="Step3">Step 3: Enter Billing Address

</div>
<div class="checkoutstep">
<div class="row">
<fieldset>
<div class="span4">
<div class="control-group">
<label class="control-label">Same as Shipping Address</label>
<div class="controls">
<input name="BillingAsShipping" id="BillingAsShipping" value="yes" type="checkbox">
</div>
</div>
<div class="control-group">
<label class="control-label">First Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="FirstName" name="FirstName" value="James">
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="LastName" name="LastName" value="Anderson">
</div>
</div>
<div class="control-group">
<label class="control-label">Company</label>
<div class="controls">
<input type="text" id="Company" name="Company" value="A.M. Leonard">
</div>
</div>
<div class="control-group">
<label class="control-label">Address 1<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Address1" name="Address1" value="1020 camp street" maxlength="100">
</div>
</div>
<div class="control-group">
<label class="control-label">Address 2</label>
<div class="controls">
<input type="text" id="Address2" name="Address2" maxlength="100" value="">
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label">City<span class="red">*</span></label>
<div class="controls">
<input type="text" id="City" name="City" value="Piqua">
</div>
</div>
<div class="control-group">
<label class="control-label">State<span class="red">*</span></label>
<div class="controls">


<select name="State" id="State" onchange="updateBillingInfo();">

        <option value=""> - Select - </option>


        <option value="AK">AK: Alaska</option>

        <option value="AL">AL: Alabama</option>

        <option value="AR">AR: Arkansas</option>

        <option value="AZ">AZ: Arizona</option>

        <option value="CA">CA: California</option>

        <option value="CO">CO: Colorado</option>

        <option value="CT">CT: Connecticut</option>

        <option value="DC">DC</option>

        <option value="DE">DE: Delaware</option>

        <option value="FL">FL: Florida</option>

        <option value="GA">GA: Georgia</option>

        <option value="HI">HA: Hawaii</option>

        <option value="IA">IA: Iowa</option>

        <option value="ID">ID: Idaho</option>

        <option value="IL">IL: Illinois</option>

        <option value="IN">IN: Indiana</option>

        <option value="KS">KS: Kansas</option>

        <option value="KY">KY: Kentucky</option>

        <option value="LA">LA: Louisiana</option>

        <option value="MA">MA: Massachusetts</option>

        <option value="MD">MD: Maryland</option>

        <option value="ME">ME: Maine</option>

        <option value="MI">MI: Michigan</option>

        <option value="MN">MN: Minnesota</option>

        <option value="MO">MO: Missouri</option>

        <option value="MS">MS: Mississippi</option>

        <option value="MT">MT: Montana</option>

        <option value="NC">NC: North Carolina</option>

        <option value="ND">ND: North Dakota</option>

        <option value="NE">NE: Nebraska</option>

        <option value="NH">NH: New Hampshire</option>

        <option value="NJ">NJ: New Jersey</option>

        <option value="NM">NM: New Mexico</option>

        <option value="NV">NV: Nevada</option>

        <option value="NY">NY: New York</option>

        <option value="OH" selected="selected">OH: Ohio</option>

        <option value="OK">OK: Oklahoma</option>

        <option value="OR">OR: Oregon</option>

        <option value="PA">PA: Pennsylvania</option>

        <option value="RI">RI: Rhode Island</option>

        <option value="SC">SC: South Carolina</option>

        <option value="SD">SD: South Dakota</option>

        <option value="TN">TN: Tennessee</option>

        <option value="TX">TX: Texas</option>

        <option value="UT">UT: Utah</option>

        <option value="VA">VA: Virginia</option>

        <option value="VT">VT: Vermont</option>

        <option value="WA">WA: Washington</option>

        <option value="WI">WI: Wisconsin</option>

        <option value="WV">West Virginia</option>

        <option value="WY">WY: Wyoming</option>

        <option value="PR">PR: Puerto Rico</option>

        <option value="NA">Not applicable</option>

        <option value="AP">APO/FPO AP</option>

        <option value="AA">APO/FPO AA</option>

        <option value="AE">APO/FPO AE</option>

        <option value="FN">FN</option>

</select>

</div>
</div>
<div class="control-group">
<label class="control-label">Zipcode<span class="red">*</span></label>
<div class="controls">
<input type="text" id="PostalCode" name="PostalCode" value="45356" onblur="updateBillingInfo();">
</div>
</div>
<div class="control-group">
<label class="control-label">Country<span class="red">*</span></label>
<div class="controls">


<select name="COUNTRY" id="Country" onchange="updateBillingInfo();">

        <option value="US">United States</option>


        <option value="US" selected="selected">United States</option>

</select>

</div>
</div>
<div class="control-group">
<label class="control-label">Phone<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Phone" name="Phone" value="9377105921" placeholder="8005438955">
</div>
</div>
</div>
</fieldset>
</div>
</div>



        <div class="checkoutsteptitle down" id="Step4">Step 4: Choose Delivery Method

        </div>
        <div class="checkoutstep">
        <p>Please select the preferred shipping method to use on this order.</p>
        <span id="CheckoutShippingMethods">










<span id="CheckoutShippingMethods">


</span><div class="infomsg2 alert">
After your order is placed, A.M. Leonard will contact you with motor freight delivery rates. We'll get your approval before we ship your order.
</div><table class="order-total-summary">
<tbody><tr>
<td>Shipping Method:</td>
<td>
<select name="shipping_method" id="shipping_method" onchange="populateShippingMethods();">























<option value="1000010" selected="true"> 
Motor Freight

</option>



</select>
</td>
</tr>



<tr>    
 <!-- end .shipping-highlight .warning -->
</tr>   










</tbody></table>

</span>     
        <br>
        </div>

        <div class="checkoutsteptitle down" id="Step5">Step 5: Payment  Method

        </div>
        <div class="checkoutstep" id="Method">
        <div>
        <span id="OnAccountLink" style="color:#335f9c;text-decoration:underline;cursor:pointer;">Pay with</span> your Pre-Approved Account, or use your Credit Card below:</div>
        <div id="CCPay" class="CCPay pull-left">
        <div class="row">
        <fieldset>
        <div class="span4">
        <div class="control-group">
        <label class="control-label">Credit Card</label>
        <div class="controls">
        <input type="checkbox" id="CCMethod" name="Method" value="CCMethod" checked="">
        </div>
        </div>
        <div class="control-group">
        <label class="control-label">Name on Card<span class="red">*</span></label>
        <div class="controls">
        <input type="text" id="NameOnCard" name="NameOnCard"> 
        </div>
        </div>
        <div class="control-group">
        <label class="control-label">Card Type<span class="red">*</span></label>
        <div class="controls">
        <select name="CreditCardType" id="CreditCardType">
        <option value=""> - Select Type - </option>

        <option value="1000001">Visa</option>

        <option value="1000002">MasterCard</option>

        <option value="1000003">Discover</option>

        <option value="1000004">American Express</option>

        </select>
        </div>
        </div>
        <div class="control-group">
        <label class="control-label">Card Number<span class="red">*</span></label>
        <div class="controls">
        <input type="text" id="CardNumber" name="CardNumber" autocomplete="off" maxlength="16" placeholder="Your CC number without Dashes."> 
        </div>
        </div>
        <div class="control-group">
        <label class="control-label">Expiration Date<span class="red">*</span></label>
        <div class="controls">
        <select name="CardExpMonth" id="CardExpMonth">
        <option value="" selected=""> - Select Month - </option>
        <option value="1">1 January</option>
        <option value="2">2 February</option>
        <option value="3">3 March</option>
        <option value="4">4 April</option>
        <option value="5">5 May</option>
        <option value="6">6 June</option>
        <option value="7">7 July</option>
        <option value="8">8 August</option>
        <option value="9">9 September</option>
        <option value="10">10 October</option>
        <option value="11">11 November</option>
        <option value="12">12 December</option>
        </select> 
        </div>
        </div>
        <div class="control-group">
        <div class="controls">
        <select id="CardExpYear" name="CardExpYear">
        <option value="" selected=""> - Select Year - </option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        </select> 
        </div>
        </div>
        <div class="control-group">
        <label class="control-label"><a class="various" data-fancybox-type="iframe" href="/images/art/CVNums.gif">Card Verification Number<span class="red">*</span></a></label>
        <div class="controls">
        <input type="text" id="CVC" name="CVC" maxlength="6" placeholder="Enter your 3-4 digit CVV Number."> 
        </div>
        </div>
        </div>
        </fieldset>
        </div>
        </div>
        <div id="PreApproved" class="PreApproved" style="display:none;">

        <div class="row">
        <fieldset>
        <div class="span4 pull-right">
        <div class="control-group">
        <label class="control-label">On Account</label>
        <div class="controls">
        <input type="checkbox" value="OnAccount" id="OnAccount" name="Method">
        </div>
        </div>
        <div class="control-group">
        <label class="control-label">Customer Number</label>
        <div class="controls">
        <input type="text" id="customernumber" name="customernumber" placeholder="Required if using On Account."> 
        </div>
        </div>
        </div>
        </fieldset>
        </div>

        </div>
        </div>

        <div class="checkoutsteptitle down" id="Step6">Step 6: Confirm Order

        </div>
        <div class="checkoutstep">

<div class="cart-info">
<table class="table table-striped table-bordered">
<tbody><tr>
<th class="name">Product Name</th>
<th class="quantity">Quantity</th>
<th class="price">Unit Price</th>
<th class="total">Total</th>
</tr>

<tr>
<td class="name"><a href="#">Leonard Poly Snow Shovel</a></td>
<td class="quantity">1000
&nbsp;</td>
<td class="price"> 
<div class="prod-det-list">
<del>$19.99</del>
</div>
<div class="price-sale-now">
$17.99
</div> 
</td>
<td class="total">$17,990.00</td>
</tr>

</tbody></table>
</div>

        <span name="SimpleCheckoutCartTotalContent" id="SimpleCheckoutCartTotalContent">










<div class="row">
    <div class="pull-right">
    <div class="span4 pull-right">
    <table class="table table-striped table-bordered ">
    <tbody> 
    <tr>
    <td><span class="extra bold">Sub-Total :</span></td>
    <td style="text-align:right;"><span class="bold">$17990.00</span></td>
    </tr>
    <tr>
    <td><span class="extra bold">Shipping :</span></td>
    <td style="text-align:right;"><span class="bold">                  













                Motor Freight



    </span></td>
    </tr>
    <tr>
    <td><span class="extra bold">Tax :</span></td>
    <td style="text-align:right;"><span class="bold">$1259.30</span></td>
    </tr>


    <tr>
    <td><span class="extra bold totalamout">Total :</span></td>
    <td style="text-align:right;"><span class="bold totalamout">$19249.30</span></td>
    </tr>
    </tbody>
    </table>
    <input type="submit" class="btn btn-orange pull-right" value="Place Order">
    </div>
    </div>
</div>

</span>
        </div>
        </form></div>

Answer 1

将display:block更改为display:inline-block。否则，你的复选标记就像一个块一样！推送低于它的内容。

我不知道为什么Chrome会将其他内容放在同一条线上，因为这是错误的......