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