IE 宽度中的嵌套表不正确

Question

我无法在 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 不能和其他浏览器一样玩。

Answer 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>

不确定您为什么使用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>