IE中的样式问题 - 巨大的空间显示

Question

嘿伙计们，所以我有以下内容：

http://jsfiddle.net/z3Hr2/

这是我用来在JQuery中访问的导航，表格......这是一张照片：

现在，当我点击其中一个链接时会弹出一个表格，如下所示：

问题是在IE中，从上到下之间存在巨大差距，即使它们是display:none（单击导航链接时打开的表）。

这就是我在IE中的意思：

这是表容器布局：

<div class="csvemployeestools">
   <div class="MemberopenstatusViewer">
      <div class="OpenstatusViewertable">
          table that is opened depending on which link clicked in nav....
      </div>
   <div>
    .....


</div> <!-- after all tables are defined, this closes it out.

CSS：

.csvemployeestools{

    margin-top: 2%;
    overflow: hidden;

}

.MemberopenstatusViewer{
    display:block;
    /*float:left;*/
    margin: 0 auto;
    font-family: Helvetica, Arial, Sans-Serif;
    font-weight: bold;
    font-size: .7em;
    width:100%;
    /*overflow-x: scroll;*/

}
.OpenstatusViewertable {
    width:100%; 
    max-height: 300px;
overflow-y: scroll;
margin-bottom: 3%;
}

Answer 1

我不知道这是否会有所帮助，但您应该使用div ID进行布局而不是类。

这要好得多：

(class = . )(id = #)

但我不确定这与这个问题的关系。

Answer 2

嘿伙计们我明白了......我只是删除了桌子周围的div：

<div class="MemberopenstatusViewer">
      <div class="OpenstatusViewertable">

      </div>
   <div>

谢谢！