html - 额外的隐藏表单输入，导致表格单元格在 IE7 上展开(截图)

Question

这是我见过的最奇怪的事情之一， 我在表格单元格内有一个表格，其中包含隐藏的输入。 我注意到在 IE7 中，一旦有超过 1 个隐藏输入，单元格就会展开。

这是一个截图(说了三个也说了两个):

这是 HTML:

<table border="1" class="fix">
    <col style="width:150px;" />
    <col style="width:200px;" />
    <col style="width:200px;" />
    <col style="width:200px;" />
    <col style="width:190px;" />
      <tr>
        <td class="cell"></td>
        <td class="cell"></td>
        <td class="cell"><form action="a.php" method="GET">
          <input name="a" type="hidden" value="1"/>
          <input name="b" type="hidden" value="2"/>
          <div class="button-zone"><input type="submit" class="button" value="ABCDEF GEHIJKLM"></div></form></td>
        <td class="cell"></td>
        <td class="cell"></td>
      </tr>
</table>

一旦我删除了输入 b 行(我需要的)，单元格看起来就正常了。

这是 CSS:

table.fix {
     table-layout: fixed;
}

table.fix td { 
overflow: hidden;
}

td {
    padding: .31em 1em 2em 1em;
    text-align: left;
}

.cell {
    background-color: gray;
    padding-bottom: 12px;
    padding-left: .44em;
}

.button-zone {
    float: left;
    margin-left: 0px;
    position: relative;
}

.button {
    background-color: yellow;
    font-family: Arial;
    font-weight: bold;
    color: black;
    border: 0;
    overflow: visible;
    font-size: 16px;
    padding: 4px 20px 4px 8px;
}

这发生在 IE7 上，有什么方法可以在不修改大小的情况下解决这个问题？

Answer 1

你可以这样设置CSS:

input[type="hidden"]{
    height:0;
}