- ベストアンサー
IEとFirefoxやOperaでテキストの段組みを表示させる方法
- テキストを2段で表示させる方法について、IEとFirefox、Operaでの表示の違いがあります。
- IEでは全体に1pxの枠がつけられますが、FirefoxやOperaではdivの先頭の部分だけ線がつき、全体に囲うことができません。
- 解決方法としては、CSSのプロパティを調整することで全体に線を表示させることができます。具体的な方法については以下のサンプルコードを参考にしてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
「右のテキスト」にあたる P 要素のクラスを取れば、対応できます。提示された HTML の様な特定の場合に限定されますが・・・。（Windows XP SP2 FireFox1.5 Opera8.5 Mozilla1.7.12 Netscape7.1 IE6 で確認。） そもそも現象は、罫線を書く要素の内容が全て float 指定の為、実質的に空として先頭の部分に上下左右の罫線がまとまっているだけです。 尚、どうしても「右のテキスト」にあたる P 要素にも float 指定が必要な場合や、左右で高さが異なる場合などは、 【CSS】 .width_border{ width:300px; border:1px solid #222; } .width50{ width:50%; float:left; } .width_dummy{ clear:both; } 【HTML】 <div class="width_border"> <p class="width50"> 左のテキスト </p> <p class="width50"> 右のテキスト </p> <div class="width_dummy"></div> </div> 以上の様にダミーの要素を用意して float をクリアする必要があります。 最後に調査方法ですが、個々のタグの各クラス名を１つづつ書き換えたりして一部の CSS を無効にしたりして個々の CSS の影響度を調べました。 またいろいろな場所に適当な文字列を書き込み、各要素の範囲を確認しました。（今回は CSS の影響度もあるので採用しませんでしたが、範囲の確認には背景色を指定する方法も便利です。） 結果、罫線を表示する DIV の範囲から左右の P がはみ出ていて、DIV は空の状態である事が判りました。 （IE は逆に勝手に範囲を拡げているという事で、指定した内容からすれば、IE の方が不適切となります・・・。） clear:both; での対応は知らないと思い浮かびませんが、「右のテキスト」にあたる P 要素のクラスを取るくらいのお試しは容易に出来ると思うのでいろいろ試す様にお勧めします。 というか、個々の結果の知識より調べ方を覚えた方が先を考えると楽かと思います・・・。
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
.width_border{ width:300px; height:100%; border:1px solid #222; } のように高さを指定してやらないといけないのでは？
- is_may
- ベストアンサー率65% (58/89)
<p>タグで囲まず、単純に<table>で作成すればいいのでは？ <head> <style type="text/css"> <!-- .table_base { border:1px solid #222222; } --> </style> </head> <body> <table width="300" class="table_base"> <tr> <td width="150">左のテキスト</td> <td width="150">右のテキスト</td> </tr> </table>
補足
いやー・・・ それはそうなんですけども・・・ 構造化するためにtableを使わないでfloatで指定したいというのが質問の趣旨だったのですが・・・ 言葉が足りなくてすいません。
補足
なるほど、大変参考になりました。 ただいまCSS勉強中ですので、適用範囲の確認の仕方はなるほどという感じでした。 どうもありがとうございました。