[2008.8.27追記]
どうやら個人的に使っていたFirefoxのテーマが引き起こしていた問題のようです。テーマによっては同様のケースの問題が発生するかも。そんな時はテーマをデフォルトにして確認してみましょう。
たとえばこんなCSS、HTMLがあったとします。
width:150px;
height:100px;
border:1px solid #ff0000;
overflow:auto;
}
あいうえお<br />
あいうえお<br />
あいうえお<br />
あいうえお<br />
あいうえお<br />
あいうえお<br />
</div>
これをFirefox3で表示するとこうなる。
border-bottomが黒くなっちゃってるー！？スクロールバーの下はちゃんと赤い。なんだこれ？この現象はfirefox3でborder-bottomが設定してあるボックスにoverflow:autoを適用すると起こる。Firefox2.xの時にはこんなことにはならなかったのに…と思って非常に悩んだが、borderの太さを2px以上にしてみてようやく分かった。
なるほど、そういうことか！ということで、
を追記すると…
無事解決！いやいやいや、そうじゃなくて、確かにｘのスクロールバーは有効にはならなくていいけど、これは正しい実装なのだろうか？少なくともfirefox2.xの時はこうじゃなかったと思うんだけどなぁ。border-widthを1pxにしたときでもちゃんと、無効な状態のスクロールバーが表示されていてくれたら、問題の解決も速かったはずだし。
それと、overflow-x（overflow-y）ってIEの独自拡張かと思ってたら、いつのまにかFirefox、Safariでも実装されてたのね。CSS対応状況とかまとめページないかな？探すか…。
ついでにFirefox向けのCSSハックをググったのでメモ。
Firefox 3 CSS hackより
html/**/body div.box, x:-moz-any-link, x:default {…}
div.box, x:-moz-any-link, x:default {…}
div.box, x:-moz-any-link {…}
まとめページもありました。
[参考] Firefox 1.0, 1.5, 3.0 用の CSS ハック
[追記]
coolcodeのborder-bottomが黒いのもoverflow-x:hiddenで解決できるんじゃないかな。
Popularity: 11% [?]
8月 27th, 2008 at 11:40 AM
スパム防止プラグインのテストもかねてコメント。
＞coolcodeのborder-bottomが黒いのもoverflow-x:hiddenで解決できるんじゃないかな。
どこか黒い部分ありました？？？こちらもfirefox3ですけど、特に違和感ないですけど・・？
8月 27th, 2008 at 12:57 PM
あっーーーーー！！
検証したところ、自分が利用しているFirefoxのテーマが原因のようです。
そのテーマ自体の問題なのか、そのテーマのUIのフォントをMS UI ゴシックに変更したのが問題なのかは、まだ検証してないですが…。
その問題だったテーマも更新されていて、新しいのにしたら問題なかったです。
Proto for Windows and Linux 1.1.1pre2
https://addons.mozilla.org/ja/firefox/addon/7540
すいません。お騒がせしました。後で記事も訂正します。
しかし、利用するテーマによってはこういったイレギュラーな表示になる場合があるかもですなー。