livedoor ナレッジ

「text-indent:;」がGeckoで効きません。

livedoorブログ無料版を使わせていただいております。
記事の投稿に際して段落の始めにインデントを設けたくて下記のように記述しています。

<div class="main">
<p class="in1"><a href=""><img src="" width="161" height="107" border="0" alt="‥‥" hspace="5" class="pict" align="left" /></a>文章‥‥‥‥</p>
</div>

関係しそうな部分のCSSを下に記します：

.main{
width: 100%;  /* 親ボックスは width:26em; */
color: #222222;
font-size: .8em;
text-align: left;              
line-height: 140%;
padding: 0 0 0 .2em;
overflow: hidden;               
}
.in1 { 
clear: both;
width: 100%; 
text-indent: 1.05em;
text-align: left; 
padding: .7em 0 .7em 0;
margin: 0 0 0 0; 
}
.pict{  
border: inset .078em #dddddd;
width: 12.48em; 
height: 8.346em;
margin: .5em .7em 0 0;
float: right !important;
}

これで意図したとおりに表示されます。

ところが、imgタグをaタグで挟まない場合に、全て試した訳ではありませんが、一部のブラウザで閲覧するとインデントが設けられていないのです。

Firefox,Netscape,Mozilla,SeaMonkeyのGecko系でこの問題が発生しています。なぜこのような事になるのか知りたくて質問させていただきました。宣しくお願いいたします。

その後ちょっと調べてみました。

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#alignment

の「オブジェクトの浮動」の説明の処

浮動オブジェクトは、一般に、新しい行を開始する。

つまりこれが理由だと思われます。
text-indent は、first-line に適用されるから。
例えば、
<div style="text-indent:10em">
<p>test<img src="image.jpg" ... align="left" />text</p>
</div>
なんてやってみれば良く判る様な気がします。
align 指定を無くせば、画像ごと(test：前置き文字がなくても)インデントされます。
リンク指定はとりあえずこの現象とは直接関係ない様です。

IEでは、P要素はブロックとして処理されますが、P要素はインラインエレメントです。
text-indent は、ブロックレベル要素への適用指示(言葉が正しくないかもしれません)です。
おそらくそれで思うような動作をしないのではないでしょうか。
実際には検証していませんけど、ｐ要素をｄｉｖで囲ってｄｉｖに適用してみてはどうでしょうか