css - IE8 中的 Bootstrap 文本输入

Question

我在 IE8 中查看网站时遇到问题(但在 IE 11 的开发工具中使用仿真模式时工作正常)。

在现代浏览器中，我看到了我所期望的:

但在 IE 中，我看到以下内容:

我已经按照文档中的建议添加了 html5 shim 和 respond,.js，并且我尝试将控件包装在 div 中以手动调整它们的大小，但我最终发现输入之间的间隙看起来很糟糕。有什么明显的地方我做错了吗？

<form class="form-horizontal" role="form" style="max-width: 500px">
...

<div class="form-group">
    <label class="control-label col-sm-2">Phone</label>
    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio" name="SearchMethod" value="2" class="radio-inline" />
        </span>
        <input type="text" id="phone" class="form-control" placeholder="Phone"  />
        <input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext"  />
    </div>
</div>

Answer 1

您的输入组无效，因为它有两个文本输入表单控件。 Per the docs :

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons on a single side.

We do not support multiple form-controls in a single input group.

因此，您需要将一些自定义样式组合在一起，或者重新构建您的表单。