表單輸入框不會在Internet Explorer水平排着隊8

請大家幫幫我，我的HTML輸入框是不正確的水平襯上的Internet Explorer 8 我想一些CSS和文檔類型問題我使用<!DOCTYPE html>表單輸入框不會在Internet Explorer水平排着隊8

我附上我的代碼的Html和Css。請看看這個

CSS

.search { float: left; margin-left: 14px; font-size: 0; line-height: 0; } 
.search-btn { display: inline-block; width: 90px; height: 30px; margin: 21px 0 0 4px; background-color: #55be28; font-size: 12px; line-height: 30px; text-align: center; color: #fff; font-weight: bold; vertical-align: top; cursor: pointer; } 
.search-btn { 
    -webkit-transition: opacity 0.4s; 
     -o-transition: opacity 0.4s; 
      transition: opacity 0.4s; 
} 
.search-btn:hover { opacity: .7; } 
.search-btn .ico { margin-right: 5px; } 

.form-body, 
.form-row { display: inline-block; } 

.form-body.hidden { opacity: 0; } 
.form-body { opacity: 1; } 
.form-body { 
    -webkit-transition: opacity 1s; 
     -o-transition: opacity 1s; 
      transition: opacity 1s; 
} 

.form-row { margin-left: 10px; } 
.form-label { display: inline-block; margin-bottom: 7px; font-size: 11px; line-height: 14px; color: #464646; } 

.field, 
.select { width: 88px; height: 28px; padding: 0 10px; border: 1px solid #e1e1e1; font-family: Arial, sans-serif; font-size: 12px; line-height: 28px; color: #464646; } 
.field-small { width: 48px; } 

.select { width: 110px; height: 30px; } 
.select-small { width: 70px; } 

.form-controls label + input { margin-left: 20px; } 
.form-controls label .ico { margin: -17px 0 0 5px; vertical-align: top; cursor: pointer; } 
.form-controls label { position: relative; display: inline-block; } 
.form-controls .select-label:after { content: ''; position: absolute; top: 1px; right: 1px; width: 29px; height: 28px; background: url(images/sprite.png) -124px -27px no-repeat; cursor: pointer; pointer-events: none; } 

.form-actions { overflow: hidden; padding-top: 5px; } 
.form-actions .btn { float: right; }

HTML

<div class="search"> 
<form action="?" method="get"> 
    <span class="search-btn"> 
     <span class="open"> 
      <i class="ico ico-zoom"></i> 
      Search 
     </span> 

    <span class="close hidden"> 
      <i class="ico ico-x"></i> 
      Close 
     </span> 
    </span> 

    <div class="form-body hidden"> 
     <div class="form-row"> 
      <label for="field-date" class="form-label">Expiry date</label>          
      <div class="form-controls"> 
       <input type="text" class="field field-small" name="field-date" id="field-date" value="" placeholder="From" /> 

       <label for="field-date"> 
        <i class="ico ico-calendar"></i> 
       </label> 

       <input type="text" class="field field-small" name="field-date" id="field-date2" value="" placeholder="To" /> 

       <label for="field-date2"> 
        <i class="ico ico-calendar"></i> 
       </label> 
      </div><!-- /.form-controls --> 
     </div><!-- /.form-row --> 

     <div class="form-row"> 
      <label for="field-select" class="form-label">Select Column</label> 

      <div class="form-controls"> 
       <label class="select-label"> 
        <select name="field-select" id="field-select" class="select"> 
         <option value="">System Ref</option> 
         <option value="">System Ref</option> 
         <option value="">System Ref</option> 
         <option value="">System Ref</option> 
        </select> 
       </label> 
      </div><!-- /.form-controls --> 
    </div><!-- /.form-row --> 

     <div class="form-row"> 
      <label for="field-criteria" class="form-label">Search Criteria</label> 

      <div class="form-controls"> 
       <input type="text" class="field" name="field-criteria" id="field-criteria" value="" /> 
      </div><!-- /.form-controls --> 
     </div><!-- /.form-row --> 

     <div class="form-row"> 
      <div class="form-controls"> 
       <label class="select-label"> 
        <select name="field-and" id="field-and" class="select select-small"> 
         <option value="">And</option> 
         <option value="">And</option> 
         <option value="">And</option> 
         <option value="">And</option> 
        </select> 
       </label> 
      </div><!-- /.form-controls --> 
    </div><!-- /.form-row --> 

     <div class="form-row"> 
      <label for="field-column2" class="form-label">Select Column</label> 

     <div class="form-controls"> 
       <label class="select-label"> 
        <select name="column2" id="column2" class="select"> 
         <option value="">System Ref</option> 
         <option value="">System Ref</option> 
         <option value="">System Ref</option> 
         <option value="">System Ref</option> 
         <option value="">System Ref</option> 
        </select> 
       </label> 
      </div><!-- /.form-controls --> 
     </div><!-- /.form-row --> 

     <div class="form-row"> 
      <label for="field-criteria2" class="form-label">Search Criteria</label> 

      <div class="form-controls"> 
       <input type="text" class="field" name="field-criteria2" id="field-criteria2" value="" /> 
     </div><!-- /.form-controls --> 
     </div><!-- /.form-row --> 

     <div class="form-actions"> 
      <input type="submit" value="Search" class="btn btn-green" /> 
     </div><!-- /.form-actions --> 
    </div><!-- /.form-body --> 
</form>

感謝，請幫助。

來源

2015-11-10 Software Company

小提琴將幫助。 –

Fintek，如果你想在IE8中使用內聯塊，那麼你必須使用xhtml Doctype。
如果你想使用兩種Doctypes，那麼在html doctype聲明上面添加一行。

如果問題仍然存在，請將float:left;添加到您的輸入字段div中。

來源

2015-11-10 05:55:21

表單輸入框不會在Internet Explorer水平排着隊8

回答

相關問題