我正在尝试在我的Bootstrap按钮上使用最小宽度，但是当它在按钮组内时，这会在按钮右侧创建一个空格。间隙等于按钮左右填充的宽度（30px）。这只发生在真正的IE9中，而不是10进入IE9模式。如果我删除最小宽度或填充，则间隙消失。关于是什么导致这个的任何想法？除了必要的样式，我删除了所有内容。
http://jsfiddle.net/aber100/2dqQ6/
<!DOCTYPE html>
<html>
<head>
<title>Button Bug</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn {
display: inline-block;
min-width: 44px;
padding: 10px 15px;
background: #999;
}
.btn-group {
display: inline-block;
background:pink;
}
.btn-group > .btn {
float: left;
}
</style>
</head>
<body>
<div class="btn-group">
<a class="btn btn-default">1</a>
</div>
<div class="btn-group">
<a class="btn btn-default">2</a>
<a class="btn btn-default">3</a>
<a class="btn btn-default">4</a>
</div>
<div class="btn-group">
<a class="btn btn-default">5 That can be longer</a>
</div>
</body>
</html>
答案 0 :(得分：0)
这样怎么样：
添加某种持有者并为其添加font-size：0：
.btn-hold { font-size: 0; }
并在按钮文字中添加一些字体大小：
.btn-group {
display: inline-block;
background:pink;
font-size: 12px;
}
由于您的“.btn-group”设置为display：inline-block;元素之间会有空间。 Whit字体大小：0;我们正在删除它并设置font-size：0的内部大小;持有人将再次弹出文本。
答案 1 :(得分：0)
我通过切换按钮来删除额外的空间：仅在IE9中使用表格。
:root .btn-group > .btn {
display:table \9;
}