0

IE でテーブルを別のテーブル内に正しくネストするのに問題がありますが、Firefox と Chrome では問題なく動作します。何らかの理由で、IE は、ネストされたテーブルを含むセルを、設定されているよりもはるかに広く表示しています。

私のコードの簡略版：

<table width="575" border="0">
<tbody>
    <tr>
        <td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial,  small, all caps), Country (only if city isn't well known, Arial, small) -  Content text (Arial, small) First paragraph is to be full width and above any  images or related boxes, unless there is a lead.<br />
        </span></span></td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
    <tr>
        <td width="280"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
        <td width="10"></td>
        <td width="260" valign="top">
        <table width="260" border="0">
            <tbody>
                <tr>
                    <td>
                    <div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
                    <span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
                    </span>&#160;• To be used when relevant links exist<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Links to remain one line or shorter<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Link text - Arial, small, linked<br />
                    </span></span></div>
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
</tbody>

助けてくれてありがとう。IE が他のブラウザと同じように動作しない理由がわかりません。

4

1 に答える 1

1

参考までに、テーブルを使用せずに CSS でこれを実現できます。

幅をピクセルからパーセンテージに変更したところ、IE で正常に動作するようになりました...

    <tr>
        <td width="44%"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
        <td width="2%"></td>
        <td width="44%" valign="top">
            <table width="100%" border="0">
                <tbody>
                    <tr>
                        <td>
                        <div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
                        <span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
                        </span>&#160;• To be used when relevant links exist<br />
                        <span style="font-size: 2px;"><br />
                        </span>&#160;• Links to remain one line or shorter<br />
                        <span style="font-size: 2px;"><br />
                        </span>&#160;• Link text - Arial, small, linked<br />
                        </span></span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

2つをなくすことができるのに、なぜ使用colspan="3"しているのかわかりません。

とにかく、上記のコードをテストして、これが目的かどうかを確認してください...

ありがとう。

追加:
の幅を削除し、これtd'sも正常に機能します。幅が指定されたときに IE が異なる方法でレンダリングする理由がわかりません。

<tbody>
    <tr>
        <td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial,  small, all caps), Country (only if city isn't well known, Arial, small) -  Content text (Arial, small) First paragraph is to be full width and above any  images or related boxes, unless there is a lead.<br />
        </span></span></td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
    <tr>
        <td><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
        <td></td>
        <td valign="top">
        <table border="0">
            <tbody>
                <tr>
                    <td>
                    <div style="width:265px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
                    <span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
                    </span>&#160;• To be used when relevant links exist<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Links to remain one line or shorter<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Link text - Arial, small, linked<br />
                    </span></span></div>
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
</tbody>
于 2012-11-21T01:21:20.210 に答える