IE opera gecko で同様の表示がしたい

質問

いろいろと試してはいるのですが、どうしてもうまくいきません。

ウィンドウ最大化の状態では特に問題が見られないのですが、横幅が半分以下（だいたい）になると、geckoで左側のリンクの文字が折り返されずにいてboxからはみ出てしまいます。
IE、operaでは何とか（不本意ではあるんですが）折り返され、だいたい同じ感じに見ることができます。

いろいろな箇所をいじってみてはいるのですが、どうしてもうまくいかないのです。
IE、opera、geckoのどれで見ても同じに見れるページ（http://pasokon-yugi.cool.ne.jp/　とか）があるので何となく悔しいです。どうかヒントや改善案などいただきたいです。。。。

回答No.4

himajin2005_RC4 · ベストアンサー

またもや#1です。
>まだブラウザによりタグの解釈の異なる部分

こんな書籍があるのをご存知ですか？
http://home.impress.co.jp/reference/1819.htm

お礼

いやいや、全く知りませんでした。ネットで調べてもなかなか出てこなかったですから（検索仕方悪いのかな）。

これは買いかもしれませんね。情報ありがとうございます。

回答No.5

hiro_izushi

#3のhiro_izushiです。

>↑ここが知りたいです。いろいろなところを探したのですが、ここに注意するといいという具体的なものが出てこないもので。私のものと例に出したページの違うところって何なんでしょう？

良いページが見つからないので、自分なりにIE6.0／OPERA7.23／Netscape7.1で確認して見ました。

margin、padding、border-widthの概念は、参考URLの通りですが、IEはborderの外線より1px内側が基準になっていますね。他の2つは、コンテンツのサイズが基準みたいです。

質問にある文字の折り返しですが、これも同様に確認しました。

結果は、どのブラウザでも同じで、半角英文字は、文節単位でしか改行されませんでした。（例に挙げられているページも同じでした。）　これに関しては、ブラウザの仕様の様なのでHTMLやCSSで何とかなるなんてことはないようです。

可能なら、文章中にスペースを入れるなどして、文節を作るしかないと思います。

>＃ちなみにXHTMLの文法的には正しくできたみたいです（htmlvalidatorで）。長くなってすみません。

Another HTML-lint gatewayや　W3CのMarkup Validation Servicevでも、確認してみて見ると良いよ。

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

http://validator.w3.org/

参考URL：

http://msugai.fc2web.com/web/CSS/box.html

お礼

みなさんどうもありがとうございます。あれからがんばって試行錯誤してみました。
　引っかかりそうなところをなるべく避けてやってみました（geckoはまだ微妙ですが）。
　＃それにしてブラウザで解釈が違うなんて、何てやっかいなんでしょう。W3Cの他に実用面での統括をするような団体が出てきたりしないですかねぇ。

回答No.3

hiro_izushi

まず、それぞれのブラウザが、異なるデフォルトのスタイルを持っていることを理解してください。

それから、ご存知だとは思いますが、それぞれのブラウザがサポートしているタグやタグの解釈が、若干ですが異なることを理解してください。

理解した上で、遜色のないタグのみを使い、ホームページを作成すれば良いのですが、そうなるとかなり質素なページとなってしまい、おもしろくありません。

そこで、例に挙げられているページですが、まずこのページはXHTML1.0に準拠した作りとなっていますね。

最近のブラウザは<!DOCTYPE>を認識しますので、このページのようにW3Cの推奨通りに、XHTML1.0や1.1で書いてやるだけでも、かなり遜色なく見れるようになります。（ただし、ここ2~3年の間に出たブラウザのみ）

更に、スタイルシートでタグのデフォルトを設定します。これにより、各ブラウザ間の異なる設定を統一することができます。

それでも、まだブラウザによりタグの解釈の異なる部分（marginやpadding等）は、少し余裕を持って配置できるように設定すれば、例のページ程度の仕上がりになります。

補足

まだブラウザによりタグの解釈の異なる部分（marginやpadding等）は、少し余裕を持って配置できるように設定すれば、例のページ程度の仕上がりになります。
↑ここが知りたいです。いろいろなところを探したのですが、ここに注意するといいという具体的なものが出てこないもので。私のものと例に出したページの違うところって何なんでしょう？
＃ちなみにXHTMLの文法的には正しくできたみたいです（htmlvalidatorで）。長くなってすみません。

回答No.2

himajin2005_RC4

#1です
ごめんなさい、回答ではなくミス訂正です

誤)overflow属性
正)overflowプロパティ
--------------------------
>なるべく、使いたくないかなぁっておもいます
>できるだけ、よく知られた属性を使ってできないです
>かねぇ

多分無理だと思います。
出来るかもしれないけれど、少なくともCSSのプロパティとしては用意されてないと思う。
XHTMLの要素の属性として設定するつもりなら
私は断固反対です。
スタイルを調整する目的になってしまっているが
XHTMLはそんなことのためにあるのではないと
思っているので。

#CSS3はまだ策定中だろうが
本件に関しては期待できないと思うし
(仕様読んでませんが)

回答No.1

himajin2005_RC4

自信がないです。

CSS2には
overflow属性が存在します
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#overflow
これが原因ではないでしょうか？

#ごめんなさい、W3Cの文書を持ってくるべきなのですが探すのが面倒なのでこれで勘弁してください

標準値がvisibleなので
感覚的にはGecko/Firefoxの挙動が正しい気がします

補足

なるべく、使いたくないかなぁっておもいます（わがまま行っちゃいけないかもしれませんが）。できるだけ、よく知られた属性を使ってできないですかねぇ（複雑になると自分自身わかんなくなっちゃいますし）。