Michael Hartl Rails教程-CSS無法正確呈現

Question

我已經完成了本教程，但是自第7節創建注冊表單以來，CSS渲染出現了一點問題。 這就是我得到的：

這是應該的樣子：

這是相關的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;
}

想知道是否有人遇到相同的問題？

Answer 1

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

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

Answer 2

我在Chrome上也遇到了同樣的問題，盡管我不知道這是否是一個好的解決方案，但是通過消除@include box_sizing; ，我得到了預期的結果@include box_sizing; 評論：

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

Answer 3

基於http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins的Jake Bresnehan的Handy Sass Mixins和Box Sizing一節，我能夠更改mixin塊和“ include”行，並使事情在以下情況下起作用：

@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教程》第2章。 7位於http://ruby.railstutorial.org/chapters/sign-up#top