引导输入按钮包装在 IE8 中答案

【问题标题】：Bootstrap input buttons wrap in IE8引导输入按钮包装在 IE8 中
【发布时间】：2015-09-17 23:02:01
【问题描述】：

在 IE8 中的引导按钮包装存在问题。标记与官方示例中的一样：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

但是，它会导致以下结果：

有谁知道这是否是现有修复程序的已知问题？

【问题讨论】：

标签： css internet-explorer-8 twitter-bootstrap-3 radio-button

【解决方案1】：

按钮是否有足够的空间？有时在 IE 中渲染字体和其他差异可能会导致问题。也许强制显示类型会有所帮助。

.btn-group { 
    display: block; 
}

【讨论】：

是的，有足够的空间。即使在 Bootstrap 的演示页面上也会出现问题：getbootstrap.com/javascript/#buttons。应用建议的样式没有帮助。
我用适合我的 css 编辑了我的答案。我在 IE8 开发人员工具中编辑了 CSS，按钮排列正确。

【解决方案2】：

我使用了 justified 类并使用了网格系统来调整它的大小：

<div class="row">
    <div class="col-xs-3 col-xs-offset-9">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="ActionResult" id="ActionResult" autocomplete="off" value="A">
                Approve
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="ActionResult" id="ActionResult" autocomplete="off" value="R">
                Reject
            </label>
        </div>
    </div>
</div>

【讨论】：