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

Question

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

步骤：

我在基本启动bootply模板中添加的唯一内容是以下标记：

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

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

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

在图片中：

在Chrome和FF中更正渲染：

IE 11中的标记错误呈现非常相同：

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

Answer 1

我不确定为什么它可以在Chrome和FF中运行而不是在IE中，以及哪个浏览器是＆＃34;对＆＃34; （可能不是IE I猜测...），但是IE中的问题是复选框从Boostrap CSS获得的position: absolute。因此，除了position: relative之外，您只需将float: none添加到复选框，它也将在IE中按预期呈现。