回答編集履歴
1
「追記」部分を追加
answer
CHANGED
|
@@ -23,4 +23,36 @@
|
|
|
23
23
|
**2. について**
|
|
24
24
|
文字の下の空白＝ベースライン下の空白です。これが異なるのは、1. と同様の理由です。
|
|
25
25
|
ただし、```font-family``` ```font-size``` ```line-height```を指定しても、ChromeよりもFirefoxの```scrollHeight```のほうが1ピクセル大きくなりました。
|
|
26
|
-
この点、ブラウザ間の微妙な差、ということかと思います…。
|
|
26
|
+
この点、ブラウザ間の微妙な差、ということかと思います…。
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
##追記（8月12日22:40）
|
|
30
|
+
質問に「補足」として書かれた、
|
|
31
|
+
> 「一旦<textArea>をレンダリングした後、scrollheightを取得して<textarea>のheightより大きければ、scrollHeightの値でheightを再調整する」
|
|
32
|
+
|
|
33
|
+
この方法でコンテンツの高さ（```scrollHeight```で取得）と```textarea```の高さを同じにするのがいいかと思います。
|
|
34
|
+
こんなコードでしょうか。
|
|
35
|
+
```JavaScript
|
|
36
|
+
var img = document.getElementById('imgTest');
|
|
37
|
+
var imgHeight = img.scrollHeight;
|
|
38
|
+
var imgWidth = img.scrollWidth;
|
|
39
|
+
img.style.height = imgHeight + 'px';
|
|
40
|
+
img.style.width = imgWidth 'px';
|
|
41
|
+
|
|
42
|
+
var txt = document.getElementById('txtAreaTest_textarea');
|
|
43
|
+
var txtHeight = txt.scrollHeight;
|
|
44
|
+
var txtWidth = txt.scrollWidth;
|
|
45
|
+
txt.style.height = txtHeight + 'px';
|
|
46
|
+
txt.style.width = txtWidth + 'px';
|
|
47
|
+
```
|
|
48
|
+
問題点は、このコードだと、
|
|
49
|
+
- Firefox→フォントを問わず期待通り動作
|
|
50
|
+
- **Chrome→Arialなど一部フォントを```font-family```で設定した場合のみ、スクロールバーが出ます**
|
|
51
|
+
|
|
52
|
+
（これに気がついたときは目から汗が…）
|
|
53
|
+
|
|
54
|
+
とりあえずの対処法として思いつくのは、
|
|
55
|
+
- Chromeでテストをして、期待通りに動作するフォントを選ぶ。ただし、Arlal、メイリオ、MS Pゴシックなどはだめでした。
|
|
56
|
+
- ```txtHeight + 'px';``` → ```txtHeight + 20 + 'px'```などとしてスクロールバーの高さ・幅＋αを```textarea```の高さに足す
|
|
57
|
+
|
|
58
|
+
といったところでしょうか…。「いいかと思います」と言いながら申し訳ありません。
|