twitter-bootstrap – 输入组控件在IE9和Twitter Bootstrap 3中

发布时间：2020-12-18 00:23:06 所属栏目：安全来源：网络整理

导读：我在IE9中遇到了这段代码的问题： !DOCTYPE htmlhtml lang="en"head meta charset="utf-8" meta name="viewport" content="width=device-width,initial-scale=1.0" meta name="description" content="" meta name="author" content="" link rel="shortcut ic

我在IE9中遇到了这段代码的问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
    <title>Bootstrap 3 IE 9 problem</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <input id="ti1" class="form-control input-sm" name="ti1" type="text" placeholder="From">
            </div>
            <div class="col-md-3">
                <input id="ti2" class="form-control input-sm" name="ti2" type="text" placeholder="To">
            </div>
            <div class="col-md-6">
                <div class="row">    
                    <div class="col-md-3">
                        <h5>Text column1</h5>
                    </div>
                    <div class="col-md-3">
                        <h5>Text column2</h5>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <input id="ti3" class="form-control input-sm" name="ti3" type="text" placeholder="Time">
                            <span class="input-group-btn"><button class="btn btn-default btn-sm">T</button></span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <input id="ti4" class="form-control input-sm" name="ti4" type="text" placeholder="Time">
                            <span class="input-group-btn"><button class="btn btn-default btn-sm">T</button></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

当鼠标悬停在右侧的输入组按钮上时,会出现此问题.输入控件突然增大了它们的大小.另一方面,当您单击输入时,大小将重置为正常.
我在IE10中测试了这段代码,没有这样的问题.所以,问题是这是一个错误,或者布局是错误的,并导致问题.如果这是一个错误,那么有任何解决方法吗？

解决方法

我发现问题出在css第9行：

.input-group .form-control {
margin-bottom: 0;
width: 100%;
}

我无法完全理解问题的根源,但一个简单的解决方法可能是添加display：block！important;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!