2007/06/18

IEで画像の余白つき枠線を表示

前から気になってたSeesaaブログでIE6だとスタイルシートで指定しているにも関わらず、画像の余白が反映されない件を調べてみました。

他のブラウザとの違いは以下の画像の通りです。

余白あり
Firefox・Netscape
  余白なし
IE6.0

スタイルシートで以下のように記述しています。

.waku {
padding:3px;
border:1px solid #ccc;}

そして記事を書く時にimgタグにclass指定しています。
<img src="kokekko-blue.gif" width="135" height="90" class="waku" />

これで何がいけないのか散々悩みました。そして色々いじくった結果、原因がわかったのです!それは冒頭部分のXML宣言によるものでした。

<?xml version="1.0" encoding="Shift_JIS"?>

これを削除すると反映されるのです・・・が、これって削除してもいいものか?とも悩みました。そこでとりあえず削除して一度ブログを見てみる事に。すると、無事何事もなくいつも通りに表示されていました。私のシステム環境ではとりあえずOKでしたが、他の方はどうなのかが不安です。何かおかしなところがあれば教えて下さいませ。

--追記--

XML宣言があるとIE6では互換モードになってしまう為、起こることが解りました。そこでXML宣言を残しつつ画像の枠と余白が反映される方法をいくつか試したところ、以下の記述でIE6と他のブラウザで同じように表示されました。

まずスタイルシートに以下の青字を追加します。
.waku {
padding:3px;
border:1px solid #ccc;
float:left;}

そして枠線を表示したい画像をdivタグで囲みます。
<div class="waku"><img src="kokekko-blue.gif" width="135" height="90" /></div>

こうするとどちらのブラウザでも同じように表示されます。(^^)


にほんブログ村 ランキング

この記事へのコメント

コメントを書く

※質問は該当するテンプレート記事へお願いします。

※ブログオーナーが承認したコメントのみ表示されます。

名前 *
メールアドレス
URL
コメント *
認証コード ※画像の中の文字を半角で入力してください。

この記事へのトラックバック

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。