邁克爾哈特爾Rails教程 - CSS沒有正確渲染

我已經完成了教程，但自從第7部分創建註冊表單後，我遇到了CSS渲染的一個小問題。這就是我得到：邁克爾哈特爾Rails教程 - CSS沒有正確渲染

enter image description here

而這正是它應該是這樣的：

enter image description here

這是相關的CSS：

@mixin box_sizing { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

input, textarea, select, .uneditable-input { 
    border: 1px solid #bbb; 
    width: 100%; 
    padding: 10px; 
    height: auto; 
    margin-bottom: 15px; 
    @include box_sizing; 
}

想知道是否有其他人有同樣的問題？

來源

2012-08-27 8vius

區別在於Chrome與FireFox（Hartl的瀏覽器）中的input的默認高度。

CSS聲明height:auto;可讓瀏覽器計算默認高度。

來源

2012-08-27 02:26:58

剛剛檢查了這一點，而不是它，任何其他想法？ – 8vius

從我所知道的情況來看，它是在我自己的CSS之後加載bootstrap默認CSS並覆蓋我的類 – 8vius

如果是這種情況，請嘗試爲無法覆蓋的'input'指定高度。例如'身高：25px！重要;'不過是最佳做法。 –

我有Chrome的相同的問題，但我不知道這是否是一個好的解決方案嗎，我通過擺脫@include box_sizing;評論得到了預期的結果：

input, textarea, select, .uneditable-input { 
    border: 1px solid #bbb; 
    width: 100%; 
    padding: 10px; 
    height: auto; 
    margin-bottom: 15px; 
    // @include box_sizing; 
}

來源

2012-08-27 05:43:35

基於該手持薩斯混入由傑克Bresnehan在http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins和箱選型的部分，我能夠改變混入塊和「包括」行，得到的東西與下列情況下工作：

@mixin box_sizing { 
    -moz-box-sizing: $box-model; 
    -webkit-box-sizing: $box-model; 
    box-sizing: $box-model; 
} 

.debug_dump { 
    clear: both; 
    float: left; 
    width: 100%; 
    margin-top: 45px; 
    @include box_sizing(border-box); 
} 

input, textarea, select, .uneditable-input { 
    border: 1px solid #bbb; 
    width: 100%; 
    margin-bottom: 15px; 
    @include box_sizing(border-box); 
} 

input { 
    height: auto !important; 
}

也參考了Michael Hartl，Ruby on Rails教程，Ch。 7在http://ruby.railstutorial.org/chapters/sign-up#top

來源

2014-03-08 03:28:36 Gavin

邁克爾哈特爾Rails教程 - CSS沒有正確渲染

回答

相關問題