システム開発ブログ

trタグに背景画像を指定する場合はご注意を!!

小原

小原 (2010年4月20日 13:00)
産業システム部

trタグに背景画像を指定する場合は注意してください。

IE 8では、trタグに直接、backgroundのプロパティを追加して
背景画像を指定しても画像が表示されません。

タグに直接背景画像を指定したい場合は、
tdタグにて背景画像の指定を行なうか、
backgroudではなく、
styleもしくは、cssで指定するようにしてください。

--- 参考用html (ここから) ---

<html>
    <head>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <li>backgroudで直接指定</li>
        <table border="1">
            <tr background="test-bgImg.gif">
                <td>CELL1</td>
                <td>CELL2</td>
                <td>CELL3</td>
            </tr>
            <tr>
                <td background="test-bgImg.gif">CELLA</td>
                <td background="test-bgImg.gif">CELLB</td>
                <td background="test-bgImg.gif">CELLC</td>
            </tr>
        </table>
        <br>
        <li>styleで指定</li>
        <table border="1">
            <tr style="background-image:url(test-bgImg.gif)">
                <td>CELL1</td>
                <td>CELL2</td>
                <td>CELL3</td>
            </tr>
            <tr>
                <td style="background-image:url(test-bgImg.gif)">CELLA</td>
                <td style="background-image:url(test-bgImg.gif)">CELLB</td>
                <td style="background-image:url(test-bgImg.gif)">CELLC</td>
            </tr>
        </table>
        <br>
        <li>cssで指定</li>
        <table border="1">
            <tr class="bg-test">
                <td>CELL1</td>
                <td>CELL2</td>
                <td>CELL3</td>
            </tr>
            <tr>
                <td class="bg-test">CELLA</td>
                <td class="bg-test">CELLB</td>
                <td class="bg-test">CELLC</td>
            </tr>
        </table>
    </body>
</html>

--- 参考用html (ここまで) ---

・IE8
20100208_IE8.gif


※ちなみに、Firefoxでは、trタグにbackgroudでの背景画像指定で正しく表示されます。

・Firefox 3.6
20100208_FF3.gif
システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

システム開発ブログ

Twitterでilovex_officialをフォローしてください

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

ページのトップ