Firefoxでのテキストエリアとbox-sizingの問題について

###概要
Firefoxでだけこのように↓、入力前のテキストエリアが低くなり、文字が隠れてしまいます。（入力後は正常な高さに戻ります。）
https://jsfiddle.net/wyk3qxhg/

###詳細
上記JSfiddleの通りですが、ご説明します。

まず次のような１行分の高さのテキストエリアがあります。（JSで入力値に応じて高さを可変にしているので、初期状態は１行分にしてます。）

html
1<textarea>高さを文字ちょうどにしたい</textarea>
2<style>
3textarea{
4  height: calc(1em + 20px);
5  font-size: 15px;
6  resize: none;
7  width: 100%;
8  padding: 10px;
9}
10</style>
11

しかしこれに下記のようなbox-sizingをかけると、入力前のテキストエリアの高さが低くなるという問題です。

css
1*, ::before, ::after {
2    box-sizing: border-box;
3}

どうすればテキストエリアの高さを１行分にできますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1textarea {
2  /* 22px: padding + border-width */
3  height: calc(1em + 22px);
4  line-height: 1;
5}

さらに1px余裕があったほうがいいかもしれません。

投稿2019/02/19 06:32

x_x

総合スコア13749

jugemins

2019/02/19 07:05

なるほど、line-heightを書けば良かったんですね。ありがとうございます。あと、すみません３つ教えてください。 ➀1というのは1emと同じでしょうか？ ➁なぜ22pxなんですか？paddingが10pxなので上下で20pxという考えだったのですが。 ➂なぜさらに1pxとお考えになったのしょうか？

x_x

2019/02/19 08:05

line-height はこの場合は1emと同じですが、なるべく数値で指定するようにしてください。継承時に問題が起こることがあります。 https://developer.mozilla.org/ja/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values box-sizing: border-box;を指定しているため、border幅を含みます。 https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing#Values CSS3 UI の策定途中には「padding-box」というborderを含まない値も考慮されていたことがありましたが、これは削除されました。 https://www.w3.org/TR/2015/CR-css-ui-3-20150707/#changes-since-2015-05 textarea の border-width が1pxであるという確証が得られなかったため。気にしなくてもいいかもしれません。

jugemins

2019/02/19 08:08

ありがとうございます。理解できました。以後気を付けます。

行動規範の内容に同意します