gpt4 book ai didi

twitter-bootstrap - 输入组控件在 IE9 和 Twitter Bootstrap 3 中的嵌套行内调整大小

转载 作者:行者123 更新时间:2023-12-04 08:58:31 26 4
gpt4 key购买 nike

我在 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;

关于twitter-bootstrap - 输入组控件在 IE9 和 Twitter Bootstrap 3 中的嵌套行内调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18757211/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com