Internet Explorer CSS显示块问题

Question

I'm trying to create a simple tab menu using a table and div blocks. When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.

Here is the page: 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

try to add this to your empty tap style for example

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

the source here