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

http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixinsのJakeBresnehanによるHandySassMixinsと、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 Tutorial、Ch。7（http://ruby.railstutorial.org/chapters/sign-up#top ）

于 2014-03-08T03:28:36.990 に答える