IE支持白色空间：nowrap

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

该标签只是一个复选标记。我想让复选标记出现在输入栏旁边。

<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="[email protected]"> 
          </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="[email protected]"> 
         </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="[email protected]" placeholder="[email protected]"> 
</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>

来源

2014-01-29 James Anderson

你总是可以修剪出了不少的HTML代码，使其更容易阅读。例如，你感冒可能将列表减少到5个状态而不是50个，并且仍然证明了这个问题。此外，所有*对照组都必须证明问题，否则一两个就足够了？ –

变化display:block到display:inline-block。否则，你的复选标记将会起作用......就像一个块！在其下面推送内容。

我不知道为什么Chrome浏览器是把其他的东西在同一行，因为这是错误的...

来源

2014-01-29 16:05:20

IE支持白色空间：nowrap

回答

相关问题