内嵌复选框在Chrome和Safari中正确显示，但不是FireFox和IE

我有一个运行在使用Bootstrap的Rails上的网站。内嵌复选框可在Chrome和Safari中呈现，但在Firefox或IE中不会。内嵌复选框在Chrome和Safari中正确显示，但不是FireFox和IE

Firefox or IE (Not correct) 该复选框位于不正确的标签中心。

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

的Gemfile

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>

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

谢谢！

大卫

来源

2015-12-26 David

如果可能，请提供相关的CSS或在线版本的链接 – Trix

想要*碰撞*这个看看是否有其他人有任何想法？ – David

昨晚我得到了这个工作。

添加以下到我的.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中正确呈现。

祝你好运！

来源

2016-01-29 14:35:52 David

内嵌复选框在Chrome和Safari中正确显示，但不是FireFox和IE

回答

相关问题