表单输入框在 Internet Explorer 8 上没有水平排列

Question

请帮助我，我的 html 输入框在 Internet Explorer 8 上没有正确地水平排列。我猜有些 CSS 和 Doctype 问题我正在使用 <!DOCTYPE html>

我附上了我的代码的 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>

谢谢，请帮忙。

Answer 1

Fintek，如果你想在IE8中使用inline block，那么你必须使用xhtml Doctype。
如果你想同时使用这两种Doctype，那么在上面添加一行你的 html 文档类型声明。

如果您的问题仍然存在，请将 float:left; 添加到您的输入字段 div.

表单输入框在 Internet Explorer 8 上没有水平排列

form input boxes are not lining up horizontally on Internet explorer 8

html

css

internet-explorer-8