Menu
I've got a problem with this piece of code in 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>
The problem appears when the mouse hovers over the input group buttons on the right. The input controls are suddenly increase their size. On the other hand, when you click on inputs, the size resets to normal. I've tested this code in IE10 and there is no such a problem. So, the question is is this a bug or maybe the layout is wrong and causes the problem. If it's a bug then is there any work around?
751
I found out that the problem is in css line 9:
.input-group .form-control {
margin-bottom: 0;
width: 100%;
}
I couldn't understand exactly the source of the problem but a simple workaround could be to add display:block !important;
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
