Chrome - Colspan没有按预期工作

Question

我有这个代码:

<tr>
    <td width="40%" align="left" class="form_cell">
    <span class="sub_header">Update or Delete</span><br />
    Please select whether you would like us to update this contacts details, or delete them from the system.
    </td>

    <td width="60%" align="left" class="form_cell">
    [class=form__parser func=updateDetails__updel(150.$update_or_delete$.true)]
    </td>
</tr>
<tr>
    <td width="100%" align="left" colspan="2" id="ammend_contact_details" style="display: none;">
        <table border="0" cellspacing="0" cellpadding="0" width="100%" align="left">
            <tr>
                <td width="40%" align="left" class="form_cell">
                <span class="sub_header">New Title</span><br />
                            Please enter the contacts new title, IE Mr, Mrs, Dr, Miss, Ms
                </td>

                <td width="60%" align="left" class="form_cell">
                <input type="text" name="update_contact_title" class="input" size="48" maxlength="6" value="$update_contact_title$" />
                </td>
            </tr>
        </table>
    </td>
</tr>

以开头的代码[class=form__parser...]创建下拉列表.如果单击其中一个选项,ID ammend_contact_details则会显示其下方的单元格(),否则将隐藏该单元格.

此页面的网址是:http://www.westlandstc.com/index.php？plid = 6 #eyJwbGlkIjoiNTkiLCJjbGlkIjoiNDQ2Iiwic2NsaWQiOiJudWxsIiwiZHluYW0iOiJudWxsIiwiYXBwSWQiOiJudWxsIn0=,有问题的元素位于页面的最底部.

问题是,该colspan属性在Internet Explorer中工作正常(惊喜),但是,在Chrome中,所有应该分布在2个父列上的内容只进入第1列.

我已经进一步缩小了这个bug,如果删除该style="display: none"属性它可以正常工作.每当我尝试更改显示样式或可见性样式时,Chrome都会将所有内容放回第一列.

另外,我尝试将跨越2列的单元格的背景颜色设置为红色.在Internet Explorer中,再次按预期工作.在chrome中,不显示背景颜色.

任何想法如何解决这一问题？

Answer 1

您为了展示它而将"显示"属性设置为什么？你需要使用'display:table-cell'(或者类似的 - 不记得确切的值)才能让chrome把它当作表格单元格来对待