内联复选框在 Chrome 和 Safari 中正确显示，但在 FireFox 和 IE 中不正确显示答案

【问题标题】：Inline Checkboxes Display Properly in Chrome & Safari but not FireFox & IE内联复选框在 Chrome 和 Safari 中正确显示，但在 FireFox 和 IE 中不正确显示
【发布时间】：2015-12-26 05:27:55
【问题描述】：

我有一个使用 Bootstrap 在 Rails 上运行的网站。内联复选框在 Chrome 和 Safari 中呈现良好，但在 Firefox 或 IE 中则不然。

Chrome or Safari (Correct) 复选框位于标签的左侧。

Firefox or IE (Not correct) 复选框在不正确的标签中居中。

我已将 Bootstrap gem 添加到我的 rails 应用程序中。

宝石文件

gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails', '~> 5.0'

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

login.html.erb

<%= f.label :remember_me, :class => "checkbox-inline" do %>
      <%= f.check_box :remember_me%>Remember me on this computer?
<% end %>

在浏览器中呈现的代码

<label class="checkbox-inline" for="session_remember_me">
      <input name="session[remember_me]" type="hidden" value="0">
      <input type="checkbox" value="1" name="session[remember_me]" id="session_remember_me">Remember me on this computer?
</label>

我在一个测试 Rails 应用程序中添加了 Bootstrap CDN，并且复选框在所有浏览器中都正确呈现。我不反对删除 Bootstrap gem 并切换到 CDN，但想先咨询 SO 人群。有没有人见过这个？有没有更简单的解决方案？

谢谢！

大卫

【问题讨论】：

如果可能，请提供相关的 CSS 或在线版本的链接
想碰这个看看有没有其他人有什么想法？

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

我昨晚搞定了。

我将以下内容添加到我的 .css 中

/*Check box in the middle of the text fix*/

.checkbox {
    width: 15px;
    height: 15px;
    float: left;

}
.checkbox-inline {
    float: left;
    padding-left: 3px;
    margin-bottom: 15px;
    margin-left: 10px;
    padding: 15px


}

.radio {
    width: 15px;
    height: 15px;
    float: left;

}
.radio-inline {
    float: left;
    padding-left: 3px;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 15px;

}

这是我在视图中所做的一个示例，导致复选框位于标签文本的中间。

  <%= f.label :remember_me, :class => "checkbox-inline" do %>
      <%= f.check_box :remember_me%>Remember me on this computer?
  <%= end %>

我改成这样了：

<label class="checkbox-inline">
    <%= f.check_box :remember_me, class: "checkbox" %>
    Remember me on this computer?
</label>

您可能需要使用padding-left 才能让它看起来正确。到目前为止，这已经解决了我在 Firefox 和 IE 11 上的问题，它仍然在 Safari 和 Chrome 中正确呈现。

祝你好运！

【讨论】：