WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:IE と firefox における回り込みの違い

0:[投稿] 怠惰マスク [2009/02/14 21:40 ] [環境:IE6、firefox2、WINXP わかりません]

 こんにちは。またお世話になります。

 下記のようなスタイルシートとタグを書きました。IE で見てみると期待どおり回り込んで表示され、インデントも反映されています。firefox だと、CCC・・・の方の段落は1行目だけ回り込んでおらず(2行目以降は回り込んでいます)、EEE・・・の方はインデントが反映されていません。

 CCC・・・の方は IE でも firefox でも全ての行が回り込み、EEE・・・の方はインデントが反映されるようにしたいと思っているのですが、何か方法がありますでしょうか。

 よろしくお願いします。

−−−スタイルシート−−−
body                {text-align: center;}

div#container            {width: 720px;
                margin-right: auto;
                margin-left: auto;
                text-align: center;}

h1                {font-size: 140%;
                margin: 30px auto -20px;}

h2                {width: 660px;
                font-size: 100%;
                text-align: left;
                clear: both;}


.exp                {width: 600px;
                line-height: 1.7;
                margin: 8px auto 0;
                text-align: left;
                text-indent: 1em;}

.illust1            {float: left;
                margin-right: 15px;}

.photo1                {float: right;}


−−−タグ−−−
<body>
<div id="container">

<h1>AAA</h1>

<h2>BBB</h2>

<p class="exp">
<img src="illust.jpg" border="0" alt="illust.jpg(1569 byte)" width="138" height="130" class="illust1"/>
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
</p>

<h2>DDD</h2>

<p class="exp"><img src="photo.jpg" border="0" alt="photo.jpg(1718 byte)" width="174" height="152" class="photo1"/>
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
EEEEEEEEEEEEEEEEEEEEEEEEEEEE            </p>

</div>
</body>


1:[回答] 元帥 [2009/02/17 13:00 ]

pxで指定しますと、様々な横幅に対応できない(横スクロールバーが出て見難い)ので、emや%といった相対サイズで指定する方が良いです。


CSS:
p.exp0{
    width: 800px;
    margin: 8px auto 0;
}

.exp{
    line-height: 1.7;
    text-align: left;
    text-indent: 1em;
}

HTML:
<p class="exp0">
<img src="illust.jpg" alt="illust.jpg(1569 byte)" width="138" height="130" class="illust1"/>
<p class="exp">
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
</p>
</p>


2:[回答] 怠惰マスク [2009/02/18 11:59 ]

元帥さん、有り難うございます。参考にさせて頂きます。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]