ウェブ、ショウジン

CSSで高さ制限をした要素においてoverflow:autoやoverflow:scrollが効かない(ように見える?)

2012-9-3
Category
CSS

高さを固定にしたボックス要素で、その高さを超えた場合の扱いを「overflow:auto」とかでCSSで指定するわけですが、先日今まで見たことのない「スクロールバーが表示されない、もしくは表示されたりされなかったりする」という現象に遭遇して20分くらい焦ったので一応メモ。(Mac OS X Lion以降で遭遇=これがすでに答えになっていますが)

Windowsではそういうことは起こらず(そりゃそうだ、これまでもそうだった)、Mac OS XのLion以降でこの現象を確認。(ブラウザはChromeとFirefoxだったと思うけど、たぶんSafariとかも)

CSSやブラウザ側の問題かと思って最初は調べたのですぐには参考になるようなものにもあたれず、おかげでちょっと時間がかかってしまったけど、わかってみれば実にどうしようもない、なんてことないことでした。

Mac OS X Lion以降では「システム環境設定 > 一般 > スクロールバーの表示」という設定のところで

・マウスまたはトラックパッドに基いて自動的に表示
・スクロール時に表示
・常に表示

という選択肢があって、これが「常に表示」になっていないと、今までのような「指定した高さを超えた場合はスクロールバーを表示」という状態にならない。

この事情がわかってみると、常に表示状態でなくても機能する(ユーザ側でスクロールさせられる)ことが確認できて一安心。必要なときに必要な分だけ表示するよ、的な感じでしょうか。

ようするにCSSの問題でもなく、ブラウザ側の問題でもなく、Mac OS X(Lion以降)が原因だったと。

以下の記事が参考、、というかそのまんまです。
助かりました。ありがとうございます。

CSS/Lionのブラウザでoverflow指定した際にロールバーが消えたり出たりして安定しない

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿