2

我已经完成了本教程，但是自第 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;
}

想知道其他人是否有同样的问题？

4

3 回答 3

3

input不同之处可能在于 Chrome 与 FireFox（Hartl 的浏览器）中的默认高度。

CSS 声明height:auto;让浏览器计算默认高度。

于 2012-08-27T02:26:58.313 回答
3

我对 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-27T05:43:35.667 回答
1

基于 Jake Bresnehan 在http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins上的 Handy Sass Mixins和 Box Sizing 部分，我能够更改 mixin 块和“包括”行，让事情在以下情况下工作：

@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-08T03:28:36.990 回答