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>

不知道你为什么要使用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 回答