IE中表格行之间的垂直空间太大

Question

我正在用 HTML 和 jQuery 制作订单。客户在按下添加到购物清单按钮之前必须指定一些参数。当按下按钮时，我有一个函数AddToBasket 提取客户选择的参数，然后在购物清单中追加一行。

这在 Chrome、Opera 和 Firefox 中运行良好，但出于某种原因，IE 在每一行周围添加了很多垂直空间。每行包含一个描述性文本，通常包含两个换行符/换行符。如前所述，在大多数浏览器中，这些显示在彼此下方，但在 IE 中，每一行周围的垂直空间非常大，所以我无法同时完全看到列表中的两行。

我的购物清单是一个 220 像素高、450 像素宽的 HTML 表格。这是表格的代码（我已将其包装在一个 div 中）：

<div style="height:220px;width:450px;font:16px Courier New, Garamond, Serif;overflow:auto;border:2px solid #7AB800">
  <table width="100%" height=30px cellpadding="0" cellspacing="0" border="0" id="orderlist">
    <thead>
      <tr style="color:#FFFFFF" bgcolor="#7AB800">
        <th align="left" width="80">
          DELETE
        </th>
        <th align="left" width="80">
          NUMBER
        </th>
        <th align="left">
          DESCRIPTION
        </th>
        <th class="colMeterType">
           Meter type
        </th>
        <th class="colModuleType">
           Module type
        </th>
        <th class="colOrderOrQuote"></th>
      </tr>
    </thead>
    <tbody id="shoppingListBody" style="height:200px;">
    </tbody>
  </table>
</div>

只有前三列是可见的，colMeterType、colModuleType 和 colOrderOrQuote 在 css 样式中设置为不可见。我在这里存储用户不需要看到的信息。当用户按下添加到购物篮按钮时，我会调用一个函数，首先提取用户选择的变量，然后将其附加到购物清单：

  $('#orderlist').append('<tr>'+
    '<td align="center" class="rm"><input type="checkbox"/></td>'+
    '<td><input class="numberOfItems" value="1" width="75px" size="3" pattern="[0-9]+" onkeyup="verifyQuantity()" type="text"/></td>'+
    '<td>'+bodyContent +"</td>"+
    '<td class="colMeterType">'+txtMeterType +"</td>"+
    '<td class="colModuleType">'+txtModuleType+ "</td>"+
    '<td class="colOrderOrQuote">'+ txtOrderOrQuote + "</td></tr>");

描述性文本存储在变量bodyContent中。

CSS 根本不包含太多内容，但它是：

<style type="text/css">
   .HMalternatives{margin-left:20px;}
   .COMalternatives{margin-left:20px;}
   .colMeterType{display:none;}
   .colModuleType{display:none;}
   .colBestEllerForesp{display:none;}
   .warning{background-color:red;}
   .clear{ cleear:both; line-height: 0; overflow:hidden;}
   hr { border:0; border-top: 2px solid #7AB800 !important; height:0; width:100%; }
</style> 

我已经在 Stack Overflow 和其他地方搜索过这个问题的解决方案。我找不到任何有我确切问题的人，但我尝试了不同的方法，例如在样式中设置 tr { padding-bottom:0px}，但我发现的任何东西都不能解决我的问题。

Answer 1

如果不亲自测试确切的 HTML/CSS，很难说。

但是，我建议检查表格单元格中的任何和所有元素的填充和边距设置 - 输入元素等。单元格内文本的行高也会影响行高，以及在高度属性顶部有填充。如果您有最终 HTML 和 CSS 的示例，可能会更容易测试。