https://var.blog.jp/archives/28299286.html

1. ななしさん
2016/01/20 22:32
これはバグではありません。
textareaにvertical-align:bottomやvertical-align:top、またはdisplay:blockを指定すればスクロールバーはでないはずです。

vertial-alignの初期値がbaselineのために起こる問題で、display:inlineやdisplay:inline-blockなどの要素は親要素のベースラインに合わせて配置されます。一般的にベースラインは行の下端より上にあるため、height:100%の要素は行をはみ出してしまい、スクロールバーが表示されるのです。

空のdivにdisplay:inline-blockを指定しても同様の問題は起こりえます。

ベースラインの位置はフォントによって異なる上、置換要素のベースラインはブラウザ依存なため、環境によってこの問題は起こったり起こらなかったりすることも考えられます。事実、Firefoxでは問題がないように書かれていますが、わたしの環境ではFirefoxでもスクロールバーは表示されてしまいます。

それから「textarea以外のブロック要素を〜」と書かれているので勘違いされているのかもしれませんが、textareaもiframeも（ブロックレベル、インラインという区別をつけるなら）インライン要素です（iframeのiはinlineのi）。

この問題は、img要素の下部に空白ができるというCSSの典型的な疑問と本質的に同じものです。textareaやiframeに問題があるわけではありません。

当然、Chromeは悪くありません。

長々と失礼しました。

2. [管理人]
2016/01/20 23:00
丁寧な解説ありがとうございます

そんなところに原因があったんですね
全然気づきませんでした

> textareaもiframeも（ブロックレベル、インラインという区別をつけるなら）インライン要素です（iframeのiはinlineのi）。

言われてみればそうでした
inline frame 言ってますものね
block要素にして使うことが多いので完全にblock要素扱いしていました

transitional だと問題なかったのは transitional だと vertical-align が baseline じゃなくて bottom だったからなんですね

勉強になりました
ありがとうございました

3. ななしさん
2016/03/12 21:43
この記事にドンピシャで悩みを解決していただきました。
管理人さん、1 さん、ありがとうございます。

4. kafuka
2017/04/30 21:51
僕は、逆に「アコーディオン」内のインラインフレームのスクロールバーが消えるのに、ハマっています。
まる１日かかってますが、うまくいきません。
１．最初、「アコーディオン」を開く→スクロールバーが付く＝OK
２．「アコーディオン」を閉じて、再び開く→スクロールバーが付かない＝NG（他は変化なし）
３．以降、ずーと付かないが、画面を伸び縮みさせると、スクロールバーが付く（けど、２をするとダメ）
アドバイス、頂けたらありがたいです m(_ _)m

ブラウザはChromeで、インラインフレーム付近の記述は：
<table id='tblB' style="margin-leftt:0px;margin-right:auto;width:45%;height:500px;">
：
<div id='colla4' data-role="collapsible" data-collapsed="true" data-mini="true">
<iFrame id="ifm4" src="http://ｘｘｘｘｘ.html" data-role="none" style="margin-leftt:0px;margin-right:auto;min-height:260px;width:100%;display:block;" scrolling="yes">
</iframe>

5. [管理人]
2017/04/30 22:41
もっと具体的なコードがないとちょっとなんとも言えません

とりあえずこんなの使ってみたのですが問題なくスクロールバーがでていました
http://var.blog.jp/q/170430-1.html

6. kafuka
2017/05/01 10:36
Res、ありがとうございます。
ご提示のHtmに、アコーディオンを追加したところ、現象が再現しました。
試しに、FireFoxで見たら、問題なく（常に）スクロールバーがでました。
どうも、よくわかりません。

http://www.geocities.jp/rhcpf907/170430-2.htm

他の変更点：
<style>
#content{
max-height: 0px;　→　max-height: 300px;

（0pxでは、画面に何も表示されませんでした）

7. kafuka
2017/05/01 18:26
画面をリサイズすると、スクロールバーが復活するので、
アコーディオンが開く時、120msおいて $(document).trigger("resize")とやってみたのですが、ダメでした。
trigger("create")も（笑）
Googleってみると、以前「Chromeでは、スクロールバーが出ない」というバグがあったようななので、
その時の　Chrome側の対処が十分でなく、そのため、
アコーディオンが閉じて→開いた時、ダメなのかなぁ　と思ったりしています。

恐縮ですが、何か思い当たることがあれば、お教え下さい m(_ _)m

8. [管理人]
2017/05/02 01:44
http://var.blog.jp/archives/70419297.html

こっちに記事書きました
Chrome のバグなので一時的な対処方法です

COMMENT

コメント一覧 (8)