Bootstrap 3 复选框中心对齐和浮动：在 IE 中似乎没有被忽略答案

【问题标题】：Bootstrap 3 checkbox center alignment and float: none seems to be ignored in IEBootstrap 3 复选框中心对齐和浮动：在 IE 中似乎没有被忽略
【发布时间】：2015-07-08 16:50:57
【问题描述】：

首先是 bootply 沙箱：demo of the issue。在 Chrome 和 FF 中按预期呈现，但在 IE 中似乎忽略了float: none。

步骤：

我添加到基本入门引导模板的唯一内容是以下标记：

<div class="checkbox">
  <input id="myCheckbox" style="float: none;" type="checkbox">
  <label for="myCheckbox">My checkbox</label>
</div>

内部的这个 div 和原始的 <div class="text-center"> 所以所有文本和复选框水平居中对齐... 如果我将float: none 应用于输入元素。

问题在于，仅在 IE（包括 11 在内的所有版本）中，float: none 似乎被忽略了，因此复选框仍然与左侧对齐，远离其标签。这个问题是在一个非常复杂的页面中检测到的，该页面使用了剑道、引导程序、自定义引导程序主题 (inspinia) + 一些自定义样式，但最后我成功地在这个非常简单的引导程序演示中隔离了它。

在图片中：

在 Chrome 和 FF 中正确呈现：

同样的标记在 IE 11 中呈现不正确：

我错过了什么？我想让复选框中心对齐。边距不是真正的选项，因为此页面应该是响应式的，并且容器将被调整大小。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我不太确定为什么它在 Chrome 和 FF 中而不是在 IE 中工作，以及哪个浏览器是“正确的”（我猜可能不是 IE...），但是 IE 中的问题是 position: absolute该复选框来自 Boostrap CSS。因此，如果您只在复选框中添加position: relative 和float: none，它也会在 IE 中按预期呈现。

【讨论】：