プロが教える店舗&オフィスのセキュリティ対策術

現在Dreamweaverでサイトを制作中です。
ソースを整えるために時折「ソースフォーマットの適用」しながら制作しているのですが、
ソースフォーマットの適用をすると、

1 <img~><img~><object~>

と一行で書いているソースが

1 <img~><img~>
2 <object~>

といった形に改行されて表示されいます。

ie7で確認したところ、上記のように整形されても、それぞれの間に余白等は出来ず、問題なかったのですが、
firefoxで確認したところ、それぞれ改行されたタグとタグの間に少し隙間が出来ます。
(画像オブジェクト ではなく 画像 オブジェクト といったように半角スペースくらいの隙間ができます。)

このような場合、どう対処するのがいいのでしょうか?

ソースフォーマットはたびたび適用させるので、適用させる度に改行を消して1行にするのも大変かなと思い、css等で余白を調整できればいいのですが、色々試してみてもどうやら改行をなくさないとfirefoxでは少し余白が出来てしまうようで、困っています。

何かアドバイス頂けましたら助かります。よろしくお願いします。

A 回答 (1件)

IEは、しばしばウェブ標準に反する挙動をするので誤解しますが、



【引用】____________ここから
ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。 特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 これは、lang属性やHTTP "Content-Language"ヘッダフィールド([RFC2616]の14.12参照)、ユーザの設定、等による言語情報が存在しない場合であっても、可能かつ必要な動作である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[9.1 空白類( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

 ということで、これは正統な処理です。IEが間違っている。<img><object>も共にインライン要素ですから、そうでなければまずいです。これは、次のような例を考えるとわかるでしょう。
<p>
 my name is
 ORUKA1951.
</p>
 というソースを表示したとき、my name isOROKA1951.じゃまずい!!

 基本的にひとつの段落ないしブロックに入るべきものですから
<p>
 <img><img><img>
</p>
 となるべきです。それでも消したい場合は
<p>
 <img><!--
--><img><!--
--><img>
<p>
とか、
<p>
 <img
 ><img
 ><img>
<p>
とか・・
<p class="imageLine">
 <img>
 <img>
 <img>
<p>
として
p{clear:left;}
p.imageLine img{
 float:left;
}
あるいは、
p.imageLine {
display:table-cell;
*display:inline; /* IE */
*zoom:1;/* IE */
}

いずれにしても、文法的には、<img><img>が正しいです。私はそもそもそのような画像の並べ方はしません。そうしなければならないと言うことは、必ず文法や文書構造上の問題があります。(画像を読み込まないユーザーエージェントで代替テキストを表示させて意味が通じますか?)

 実際には、あなたの<img><object>が文書構成上、どのようにマークアップすべきかがわかりませんので、具体的な対策は示せませんが、画像を敷き詰めるなら、スタイルシートでfloatを使うなり、display:block;にするなり・・もあるでしよう。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
ものすごく知識がある方ですね!色々調べた際に載っていたことや知らなかったことをまさに総まとめしてくださったような回答です。
本当にありがとうございました!

お礼日時:2011/12/08 21:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!