2

我正在尝试在我的 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>
4

2 回答 2

0

我通过将按钮切换为 display: table only in IE9 来消除多余的空间。

:root .btn-group > .btn {
   display:table \9;
}

http://jsfiddle.net/aber100/6585E/3/

于 2013-11-26T20:44:38.637 回答
0

像这样怎么样：

添加某种持有人并添加 font-size: 0 到它：

.btn-hold { font-size: 0; }

并在按钮文本中添加一些字体大小：

.btn-group {
  display: inline-block;
  background:pink;
  font-size: 12px;
}

由于您的“.btn-group”设置为 display: inline-block; 元素之间会有空间。使用字体大小：0；我们正在删除它并为该字体大小的内部设置大小：0；持有人将使文本再次弹出。

演示

于 2013-11-05T20:37:58.903 回答