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的样本，则可能更容易测试。

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

1 个答案: