html - 当下拉列表更改其内容时，带下拉列表的表不会在 IE 7 中调整大小

Question

我的页面由一个包含两个下拉列表的表格组成。当第一个下拉列表(组)发生变化时，第二个下拉列表将获得新内容(JavaScript)，具体取决于第一个选择。

在 IE7 和 IE8 的兼容性 View 中，第二个下拉列表不会调整表格的大小。

这是我所期望的以及它在其他浏览器中的样子(下拉列表扩展到其最大值的大小):

知道如何在 IE7 中获得相同的行为吗？

这是代码:

<table border="1" style="background-color: silver; margin: 0; padding: 0">
<tr>
    <td style="background-color: #336; color: white; font-weight: bold">Process Monitor  </td>
</tr>
<tr><td>
    <table style="border: 0; margin: 0; padding: 0">
    <tr>
        <td width="10px">&nbsp;</td>
        <td><form name="rid_select" "action="?" method="GET">
            <select id="pvar_pri" name="pvar_pri" onChange="setOptions(this.options[this.selectedIndex].value)">
                <option value="0">Select group</option>
                <option value="5">Item 1</option>
                <option value="10">Item 2</option>
            </select>
            <select id="pvar_sec" name="pvar_sec" onChange="this.form.submit()">
                <option value="">Select variable</option>
            </select>
            <input type="submit" value="Select">
        </form></td>
        <td width="10px">&nbsp;</td>
    </tr>
    </table>
</td>
</tr></table>

Answer 1

我真的尝试过只使用 CSS 来解决这个问题，但仍然没有得到任何结果。

我可以为您提供替代解决方案，因为您的表格很小并且重绘它不会花费太多时间和资源:

1. 添加保存表单的表的 ID

   <table id="FormCointaner">
   

2. 设置重绘表格的第一个选择框的onchange函数在每个值发生变化时

   $(document).on('change','#pvar_pri',function(){
       $('#FormCointaner').html($('#FormCointaner').html());
   });
   

据我所知，由于某些原因，IE 在添加新元素时不会重绘表格。

你可以在这里查看我的想法:

http://jsfiddle.net/jnKnx/