ベストアンサー

CSSを使うと文字が飛び出てしまいます・・・(T_T)

2005/07/12 01:07

ホームページをCSSというものを使用して何とかかんとか作ったのですが、IEだと普通に表示されますが、firefoxだと箱を飛び出して文字が、つき抜けてしまいます。色々調べるのですが、具体的な問題点が把握できません。以下にソース？？(でしょうか)を記載しますのでご指摘の方よろしくお願いいたします。 ----CSS----- .box{ margin: 0px auto 0px auto; border: 1px solid #3953a4; width: 460px; text-align: left; padding: 10px; letter-spacing: 1.5px; font-size: 12px; line-height: auto; } になります。よろしくお願いいたします。

pink_kimera
お礼率73% (127/172)

HTML
回答数8
ありがとう数7

みんなの回答 （8）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ao_
ベストアンサー率33% (15/45)

2005/07/13 09:01 回答No.8

ちょっと自信があったんですが残念です。となると#7さんの言う通りちょっとした間違いが違うところにあるのかもしれませんね。断言はできませんが… ちなみにIEとFF（Firefox）での表示の違いは背景の色だけですか？IEではCSSが全て効いていて、FFではCSSが全く効いていないといった状態ですか？

その他の回答 (7)

koutarou504
ベストアンサー率44% (182/407)

2005/07/13 08:00 回答No.7

横から失礼します。＃５の礼文の件は＃６の通り <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test0003</title> <style type="text/css" media="handheld,screen,projection,tv,tty,print">  </style> </head> <body> <div class="box"> <h2>ここに小見出しです。</h2> <p>ここに普通に文章がきます。 </p> </div> </body> </html> 以上で適切に動作する様ですが。と言っても firefox の環境が無いので、 WindowsXP SP2 でのIE6.0 Sleipnir1.66 Opera7.54u2 Mozilla1.7.5 での確認ですが・・・。一応、1box での不適切な動作の再現は Mozilla にて出来ました。しかし、CSS の記述と属性値を共に 1box から box に変えた後は、いずれも適切に表示され・・・。それでも表示が不適切なら、 CSS なり HTML なりをほぼ全て提示しないと判らないかもしれませんね。どこかに書かれた本人も意識していない記述があり予想外の処が影響している可能性もあるかも・・・。

ao_
ベストアンサー率33% (15/45)

2005/07/12 19:03 回答No.6

クラス名が数字から始まっていますね。多分コレが原因でしょう。半角英字から始まるクラス名を付けてみてくださ。

質問者

お礼 2005/07/12 21:25

ao_さん有難うございます。先ほど半角英字から始まる名前にしたのですが一向に反映されませんでした・・・。一体何が原因なのでしょうか不思議です？

ao_
ベストアンサー率33% (15/45)

2005/07/12 16:51 回答No.5

ao_です。 backgroundにカラーを指定してるんですよね？ちょっとCSSのソースを見ないとわかりません…　出来ればHTMLの問題の部分もあれば何かわかるかもしれません。　

質問者

お礼 2005/07/12 17:19

ao_さん、有難うございます。すみませんCSSを付けるのを忘れておりました。以下が問題のCSSになります。 CSSです。 +++++++++++++++++++++++++++ .1box{ background-color: #99ccff; margin: 0px auto 0px auto; border: 3px solid #ffffcc; width: 480px; text-align: left; padding: 10px; letter-spacing: 1.5px; font-size: 12px; line-height: auto; } になります。HTML部分には普通に文章を少し書いているだけです。一応・・・ <div class="1box"> <h2>ここに小見出しです。</h2> <p>ここに普通に文章がきます。 </p> </div> これだけです。<h2>と<p>には文字サイズの指定を行っているだけです。なぜbackground-color: #99ccff; だけの色がfirefoxで反映されないのでしょうか？よろしくお願いいたします。

ao_
ベストアンサー率33% (15/45)

2005/07/12 10:14 回答No.4

IEは幅500pxと指定してもその中に500pxを超える要素があると勝手に幅を広げて表示します。箱とおっしゃっている要素自体（.box）はIEでもFirefox同じ幅で表示さてれいますか？それと、＃2の方が言われてるとおり、半角英数字スペース無しで親要素を超えるくらい長く打ち込むと、それが一つの単語とみなされてはみ出します。（禁則処理）しかもletter-spacingも入っているのでなおさら一単語の長さが拡張しているはずです。まず、letter-spacingを消してみて、ダメならHTMLの.box部分をください。ちょっと興味のある現象なんで自分も勉強になります。

質問者

お礼 2005/07/12 14:02

ao_さん有難うございます。 >IEは幅500pxと指定してもその中に500pxを超える要素があると勝手に幅を広げて表示します。ビンゴでした！paddingの関係もあって内容物がはみ出る形となっていました、大変ご迷惑をおかけしました。感謝です。すみません、ついでにもう1つ問題が・・・、IEではボックス内のカラーはブルーに近い色を指定しているため、もちろんその色で表示されるのですが、firefoxの場合ボックス内の色が白になってしまいます。これも私の記述しているCSSに関係しますでしょうか？作れば作るほど問題が増えてきて、困ってしまいます。

pingu98
ベストアンサー率62% (17/27)

2005/07/12 06:00 回答No.3

んー、実際の症状が確認できるソースを見ないと断定はできませんが、おそらくwidthに関するIEのバグが問題点になっているように思います。通常、ボックスの幅が指定された場合、内容物がテキスト等の幅が決まっていない(折り返し可能な)ものであれば指定された幅に収まるように表示されます。また、内容物が、指定した幅より大きいひとかたまりの場合、ボックスの幅をはみ出して表示されます。ところがIEの場合、内容物がボックスの幅より大きいと、内容物に合わせて勝手にボックスの幅が広がって表示されます。更に、IEの後方互換モードではwidthの計算方法が異なり、例えば今回の例では左右のpaddingも含めて460pxとして計算されます。よって実際のwidthは440pxとなります。ということで、解決の糸口になればと思います。キーワード：css width ボックスバグ IE Mozilla 標準モード互換モード

質問者

お礼 2005/07/12 13:57

pingu98さん、有難うございます。 >更に、IEの後方互換モードではwidthの計算方法が異なり、例えば今回の例では左右のpaddingも含めて460pxとして計算されます。よって実際のwidthは440pxとなります。うっ・・・、何かこの辺にもやもやと感じる部分があります、調べてみたいと思います。

noname#107580

2005/07/12 03:47 回答No.2

こんにちは！動作確認の環境はMacでしょうか？こちらWinXPで確認しましたが、そのような症状はでませんでした。強いてあげるなら、半角英数字をスペースを入れずに460pxより長くなるまで記述しますとfirefoxでは飛び出します。 IEですと、飛び出しはしませんが、460pxを超えて幅が大きくなります。 .boxを指定する側の文章はどうなっていますか？

質問者