前のエントリーで書いた、Mac版FireFoxで半角英数字が折り返さないって問題なんですが。
overflowっていうプロパティを使えばOKだって事が判りました。
……今さら何を言ってるんだろう…とお思いの方もおられるでしょうが、私の持ってる本には、こんなプロパティ載ってないんですよ。何しろ、私がスタイルシートをいじくり回していたのは遥か昔の事で、かなりのブランクがあるため、初歩的なところで躓いて、オロオロしている状態です……。
新しい本、買うべきかなぁ。
ともかく、最新の本がなくとも、ここまでは何とか出来たってトコを、備忘録として残しておきます。
前のエントリーの際に、新たにCSSファイルに追加したのは、以下の通り。
div.ubc div.o {
margin: 5px 0px;
padding: 5px;
background-color: #E6E6E6;
}
これに、overflow プロパティで、auto と scroll を入れた場合、表示にどんな差があるか、まずチェックしました。
FireFoxの場合。
Operaの場合。
以上の結果から、
overflow:auto;を追加すれば良さそうだと思いました。
しかし問題は、Safariで見た場合。
プロパティの値を、auto にしても scroll にしても、テキストが全部表示されないという状態になっています…。
けれども、私のSafariはバージョンが1.0。
MacOSX10.2だし。
もっと新しいバージョンだとどんな風に表示されるのか、調べる方法はないかと思って探したら、ありましたよ。
Safari 2.0.4 でどう表示されるのかをチェックするだけなら、
Browsr Campがお手軽。
ここは、Windowsユーザーが、Macのブラウザからどう見えるかをチェックする時に、役立ちそうです。Safari 2.0.4以外をチェックしようと思ったら、有料になるみたいだけど。
登録して24時間の間は、WinもMacもLinuxも無料でチェックし放題ってサイトなら、
Brouser Camがいいみたい。
私も早速試してみて、その結果こんなカンジになりました。
MacOSX 10.3 Safari 1.3の場合。
MacOSX 10.4 Safari 2.0の場合。
ついでに、Windows Vista IE 7.0の場合も見てみました。
Brouser Cam、面白いなぁ。
これ、24時間過ぎてしまった後も、もう一度登録し直せば無料で使えるんだろうか…などというセコい事を考えたり。
私がBrouser Camを見つけるきっかけとなった
Webブラウザ徹底比較(3) 番外編という記事では、管理人さんがもっと色々と試しておられます。
と、以上の作業により、
div.ubc div.o {
margin: 5px 0px;
padding: 5px;
background-color: #E6E6E6;
overflow: auto;
}
を採用する事にしました。
最新の専門書籍を持っていなくても、ネットで調べれば、何とかここまでの事が出来ます。
すっごい時間がかかりますけどね………。
textarea を使おうと思って調べた事は、また別の機会にでも。
