javascript - 为什么页脚没有出现在 IE10 和 IE9 上？

Question

我的页面在 IE11 和 Google Chrome 上运行良好，但是当我尝试使用 IE10 和 IE9 打开它时，它没有出现，看起来像是被剪切了，滚动条也没有出现, 如果有人能告诉我我做错了什么，我会很高兴。

提前致谢。

P.S.:抱歉我的代码丑陋

$(function(){
    
	//Internet Explorer | if | 9-11
  	function isIE () {
 		var myNav = navigator.userAgent.toLowerCase();
  		return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
	}	
	var ua = window.navigator.userAgent;
	
	if (isIE () == 9) {
		document.getElementById("rightcorner").style.marginTop = "3px";
                document.getElementById("leftcorner").style.marginTop = "3px";
		document.getElementById("leftcorner").style.height = "21px";
		document.getElementById("rightcorner").style.height = "21px";
		document.getElementsByClassName("th_line")[0].style.height = "21px";
		document.getElementById("thead").style.marginTop = "-29px";
		document.getElementById("thead").style.marginLeft = "16px"; 
		document.getElementById("thead").style.marginRight = "8px";
		document.getElementById("cabecaixa").style.height = "20px";
		
		

	} else if (isIE () == 10){
		document.getElementById("rightcorner").style.marginTop = "3px";
        	document.getElementById("leftcorner").style.marginTop = "3px";
		document.getElementById("leftcorner").style.height = "21px";
		document.getElementById("rightcorner").style.height = "21px";
		document.getElementsByClassName("th_line")[0].style.height = "19px";
		document.getElementById("thead").style.marginTop = "-29px";
		document.getElementById("thead").style.marginLeft = "14px";
		document.getElementById("thead").style.marginRight = "22px";
		document.getElementById("cabecaixa").style.height = "20px";

	} else if (ua.indexOf("Trident/7.0") > 0) {
		document.getElementById("rightcorner").style.marginTop = "3px";
        	document.getElementById("leftcorner").style.marginTop = "3px";
		document.getElementById("leftcorner").style.height = "21px";
		document.getElementById("rightcorner").style.height = "21px";
		document.getElementsByClassName("th_line")[0].style.height = "19px";
		document.getElementById("thead").style.marginTop = "-29px";
		document.getElementById("thead").style.marginLeft = "14px";
		document.getElementById("thead").style.marginRight = "21px";
		document.getElementById("cabecaixa").style.height = "16px";
		$("body").css("overflow", "hidden");

	}else{
		document.getElementById("rightcorner").style.marginTop = "3px";
        	document.getElementById("leftcorner").style.marginTop = "3px";
		document.getElementById("leftcorner").style.height = "21px";
		document.getElementById("rightcorner").style.height = "21px";
		document.getElementsByClassName("th_line")[0].style.height = "19.5px";
		document.getElementById("thead").style.marginTop = "-29px";
		document.getElementById("thead").style.marginLeft = "14px";
		document.getElementById("thead").style.marginRight = "22px";
		document.getElementById("cabecaixa").style.height = "20px";
		$("body").css("overflow", "hidden");
	}
	//Internet Explorer | if | 9-11
  
  
    $( "#btfirst" ).button({
      icons: {
        primary: "ui-icon-seek-first"
      },
      text: false
    });
    $("#btfirst").css({'height': '1.2em','margin':'1px'});

    $( "#btprev" ).button({
      icons: {
        primary: "ui-icon-seek-prev"
      },
      text: false
    });
    $("#btprev").css({'height': '1.2em','margin':'1px'});


    $( "#btnext" ).button({
      icons: {
        primary: "ui-icon-seek-next"
      },
      text: false
    });
    $("#btnext").css({'height': '1.2em','margin':'1px'});


    $( "#btlast" ).button({
      icons: {
        primary: "ui-icon-seek-end"
      },
      text: false
    });
    $("#btlast").css({'height': '1.2em','margin':'1px'});

   
});

 
@font-face
{
	font-family: 'agroverdanab';
	src: url('./fonts/agroverdanab.eot');
	src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype');


	font-family: 'agroverdana';
	src: url('./fonts/agroverdana.eot');
	src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype');
}

html,body{height:99.3%;margin:0;padding:2px}

#header{border-bottom:1px solid #79B7E7; height:3%;font-family:"agroverdanab";font-size:13px;font-weight:600; margin-bottom:4px; margin-top:2px}
#navdata{}
#navbar{border-bottom:solid 1px #79B7E7;padding:2px}
#navbutton{float:right;}
#msgbar{border:solid 1px #79B7E7;border-top:solid 1px #79B7E7; height:3%; }
#footer{border-top:0;height:5%;position:relative;} //<--THE FOOTER :)

table{table-layout:fixed;width:100%;height:60%}
table thead tr{top:expression(offsetParent.scrollTop -2);background-color:#9BC2E6;font-family:"agroverdana";font-size:12px;overflow-y:hidden}
table tbody tr.color{background-color:#DDEBF7;font-family:"agroverdana";font-size:12px}
table tbody tr{background-color:#FFFFFF;font-family:"agroverdana";font-size:12px;border:0}

body {overflow-y: hidden}

.colgroup1{height: 1px; background-color:#9BC2E6;font-family:"agroverdana";font-size:12px;text-align: center;}
  
.th_line{margin-left:-10px; width: 300em;}
  
#thead{position:fixed}
  
#table_model{ height: 10px}  
  
#rightcorner{width: 30px; right: 7px; margin-left: -2px; background-color: #9BC2E6; position:fixed}
#leftcorner{width: 30px; left: 7px; margin-right: -2px; background-color: #9BC2E6; position:fixed}

#div_main{overflow: hidden; height:100%;display:flex;flex-direction:column; border:1px solid #79B7E7}
  
#content{height:100%;overflow-y: auto;overflow-x: hidden;border-bottom: 30px;position: relative;flex:1}

#cabecaixa{margin-top: 5px; margin-bottom: 5px; margin-right: -2px; margin-left: -3px; border-top: 1px solid #79B7E7} 

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Central de Controle da Engenharia</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
</head>
<body>

<div id="div_main">
	<header id="header" style="text-align:center;">Central de Controle da Engenharia</header>

	<header id="navbar">
		<input type="text" id="vpad-pesq">
		<select>
			<option>Código</option>
			<option>Nome</option>
		</select>
		
      <div id="navbutton">
			<button id="btfirst"></button>
			<button id="btprev"></button>
			<button id="btnext"></button>
			<button id="btlast"></button>
	  </div>
      
      <div id="cabecaixa">
        <div id="rightcorner"></div>
         <div id="leftcorner"></div>
      </div>
	
    </header>
  
    <section id="content">
	    <div id="navdata"> 
		    <table style="overflow-y:visible">
              
              <thead id="thead">
			      <tr>
                      <th class="th_line">Código</th>
		      	      <th class="th_line">Descrição</th>
				<th class="th_line">Descrição</th>
					<th class="th_line">Descrição</th>
											
				

				  </tr>
  		      </thead>
                
				<tbody>
                    <tr class="color"><td>Coxa c/ sobrecoxa s/ osso s/ pele</td><td>9.99</td><td>9.99</td><td>9.99</td></tr>
                    <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>002</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					<tr><td>003</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
					
				</tbody>
			</table>
			
		</div>
	</section>
	
	<section id="msgbar"></section>
	<footer id="footer">Rodapé</footer>
</div>

</body>

</html>

Answer 1

尝试将其包含在您的 CSS 中

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

看看HTML5 Shim.