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;评论获得了预期的结果：

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

Answer 3

根据Jake Bresnehan在http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins和Box Sizing一节中的Handy Sass Mixins，我能够改变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 Tutorial，Ch。 7 http://ruby.railstutorial.org/chapters/sign-up#top