nina-kaz.com:Internet Explorer 7 のバグ見ーつけた

画像表示不具合 : Internet Explorer 7 の修正前と修正後の比較画像

対応前の斜体のフォントで半角スペースがあり、画像と画像の間の幅が短くて折り返す場合の表示。赤文字部分

対応後の普通のフォントで半角スペースが入り、画像と画像の間の幅が短くて折り返す場合の表示。赤文字部分

上の画像と下の表記例を観ていただくと解るように、正しい HTML 表記をしているにもかかわらず、div 要素の囲みと、div 要素で回り込みの float プロパティ【 float: left ; と float: right ; 】を囲みの中に両方使用し、CSS ファイル内の em や span 等のインライン要素において、フォントプロパティに italic(斜体) を指定し、尚かつ、HTML ファイル内で単語と単語の間に半角スペースがあり、画像と画像の間の幅が短くて、全文が入りきらず折り返しの条件が重なった場合、画像表示不具合のバグがあります。これは、ローマ字表記・日本語表記共です。

不具合を起こしていたリスト項目を、Internet Explorer 7 用に強調文字の <em> と斜体のフォントを取りやめ、span プロパティで普通のフォントに修正しましたので、正しく画像表示が出来るようになりました。

* CSS ファイル内の表記例

div.sample {
        background-color: #fff0f5;
        border-color: white #a9a9a9 #a9a9a9 white;
        border-style: solid;
        border-width: 2px;
        margin: 1em 0 ;
        padding: 0 0.5em;
        }
div.left {
        float: left ;
        margin: 1em ;
        }
div.right {
        float: right ;
        margin: 1em ;
        }
em      {
        color: #dc143c ;
        font: italic 100% Monaco, Courier, monospace ;
        }
p.clear  {
        clear: both ;
        }

* Internet Explorer 7 だけが不具合を起こす HTML 内の表記例

<div class="sample">
<div class=""left">
<img src="sample1.png" width="250" 
height="240" alt="斜めにサンプル文字が入った画像(日本語)" />
</div>
<div class="right">
<img src="sample2.png" width="250" 
height="240" alt="斜めにサンプル文字が入った画像(英語)" />
</div>
<ul>
     <li>例えばこの文章にインライン要素の em を、
     <em>sample no mojigatakusanarimasuyoooooo ! kireidesyo</em></li>
     <li>と、適当に入力してみましょう。</li>
</ul>
</div>
<p class="clear">
正しい HTML 表記にもかかわらず、なんで IE 7 は変な表示になるの…
本当に困ったちゃんブラウザだわ。

* 不具合の実例

例えばこの文章にインライン要素の em を、sample no mojigatakusanarimasuyoooooo ! kireidesyo
と、適当に入力してみましょう。

正しい HTML 表記にもかかわらず、なんで IE 7 は変な表示になるの… 本当に困ったちゃんブラウザだわ。

皆さんのブラウザ環境では、正しく画像が表記されていますか ?

恐れ入りますが、スパムメール対策のため、メールアドレスの記載を止めましたので、上記の「ご意見ご質問フォームのページ」にて、お願いいたします。ご迷惑をおかけします。

Internet Explorer 7 のバグ 見ーつけた

Internet Explorer 7 のバグ見ーつけた