个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 06:53:56 24 4
gpt4 key购买 nike

请帮助我，我的 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>

谢谢，请帮忙。

最佳答案

Fintek，如果你想在IE8中使用内联 block ，那么你必须使用xhtml Doctype。
如果你想同时使用这两种Doctype，那么在你的html doctype声明之上添加一行。
<!--[if lt IE 8]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<![endif]-->
如果您的问题仍然存在，请添加 float:left;到您的输入字段 div。

关于html - 表单输入框在 Internet Explorer 8 上没有水平排列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33623524/

24 4 0
文章推荐： html - 无法仅显示背景图片的整个网页
文章推荐： javascript - 如何为多个 div 表单创建上一个和下一个按钮？
文章推荐： c++ - 如何将 WT 小部件放入 PDF？
文章推荐： c++ - 尝试将两个视频与 pHash 库及其 ruby​​ 绑定(bind)进行比较时出现段错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com