javascript - Internet Explorer CSS 显示 block 问题

Question

我正在尝试使用表格和 div block 创建一个简单的选项卡菜单。 单击选项卡时，选项卡的样式会更改以创建切换选项卡的效果，并且主体(表格单元格内的 div block )使用 css(显示: block 和显示:没有任何)。它的工作方式与它在 Firefox 中的预期方式相同，但在 IE 11 中，选项卡大小在切换时会被修改。

这是页面: Tab Example

function tabClick(tab, bodyId) {

  // tabs and bodyes arrays
  var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
  var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];

  for (var i = 0; i < tabCol.length; i++) {

    // find the tab that was clicke and
    // set it's status to selected. set
    // the others to unselected
    if (tab === tabCol[i]) {
      tabCol[i].className = 'tabSel';
    } else {
      tabCol[i].className = 'tabUnsel';
    }

    // show the body related to the selected
    // tab and hide the others
    if (bodyCol[i].id == bodyId) {
      bodyCol[i].style.display = 'block';
    } else {
      bodyCol[i].style.display = 'none';
    }

  }

}

.tabUnsel:hover {
  text-decoration: underline;
}
.tabUnsel {
  text-align: center;
  vertical-align: central;
  padding: 5px 10px 5px 10px;
  white-space: nowrap;
  cursor: pointer;
  background-color: #f0f0f0;
  border: #898c95 solid 1px;
  border-radius: 5px 5px 0px 0px;
}
.tabSel {
  text-align: center;
  vertical-align: central;
  padding: 5px 10px 5px 10px;
  white-space: nowrap;
  background-color: #ffffff;
  border: #898c95 solid 1px;
  border-bottom: 0;
  border-radius: 5px 5px 0px 0px;
}

<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
  <tr>
    <td style="border-bottom: #898c95 solid 1px;">&nbsp;&nbsp;</td>
    <td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
    <td style="border-bottom: #898c95 solid 1px;">&nbsp;</td>
    <td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
    <td style="border-bottom: #898c95 solid 1px;">&nbsp;</td>
    <td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
    <td style="width: 100%; border-bottom: #898c95 solid 1px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
      <div id="body1" style="width:100%; min-height: 300px;">
        Tab 1 content
      </div>
      <div id="body2" style="width:100%; min-height: 300px; display: none;">
        Tab 2 content
        <br/>
        <img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
        <img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
      </div>
      <div id="body3" style="width:100%; min-height: 300px; display: none;">
        Tab 3 content
      </div>
    </td>
  </tr>
</table>

Answer 1

例如尝试将此添加到您的空点击样式

 empty-tap{
  min-height: 500px; 
   height:auto !important; 
   height: 500px;
}

来源here