I have 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 occurs when the mouse hovers over the input group buttons on the right. Input controls unexpectedly increase their size. On the other hand, when you click on the inputs, the size is reset to normal. I tested this code in IE10 and there is no such problem. So the question is, is this a mistake or maybe the layout is wrong and causes the problem. If this is a mistake, is there any work?
twitter-bootstrap internet-explorer-9 twitter-bootstrap-3
Geo
source share