內嵌複選框在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

回答

相關問題