ie6，ie7，ff适应问题

div里放了4个iframe，用%设置了这几个iframe的高度，现在是ie7里没问题，在ie6里和ff里页面都乱了，是怎么回事呢<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<title></title>
<style type="text/css">
<!--
body{
margin:0;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{
list-style:none;
}
.main{
clear:both;
padding:10px 2% 15px;
text-align:center;
}
#tabs1{
text-align:left;
}
.menu1box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:pointer;
width:72px;
text-align:center;
line-height:21px;
height:21px;
}
#menu1 li.hover{
background:#fff;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-right:3px solid #ccc;
border-bottom:2px solid #ccc;
}
.main1box{
clear:both;
margin-top:-1px;
border:0px solid #ccc;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}-->
</style>
<script type="text/javascript">
<!--
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
}
}
//-->
</script>
</head>
<body scroll="no">
<form id="Form1" runat="server"  defaultbutton="Button1">    <table width="600">
        <tr>
            <td style="height: 52px; width:20%;">
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/logo2.gif" OnClick="ImageButton1_Click" /></td>
            <td style="height: 52px; width:60%;">
    <asp:TextBox ID="w" runat="server" onFocus="this.select()" onMouseOver="this.focus()" Width="315px" OnTextChanged="w_TextChanged"></asp:TextBox></td>
            <td style="height: 52px; width:20%;">
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="CoolDict查词" /></td>
        </tr>
    </table>
    &nbsp;&nbsp;
    <br />
<br />
<div class="menu1box" style="left: 0px; width: 497px; top: 0px">
  <ul id="menu1">
   <li class="hover" onclick="setTab(1,0)" style="font-weight: bold; width: 100px; background-color: #ff00ff" >test0</li>
   <li onclick="setTab(1,1)" style="font-weight: bold; width: 100px; background-color: #00ccff"><span style="font-size: 10pt">test1</span></li>
   <li onclick="setTab(1,2)" style="width: 100px; font-weight: bold; background-color: #cc9999;"><span style="font-size: 10pt">test2</span></li>
   <li onclick="setTab(1,3)" style="width: 100px; font-weight: bold; background-color: #0000ff;"><span style="font-size: 10pt">test3</span></li>
   </ul>
</div>
<div class="main1box" style="width: 100%; height:100%; margin:0;padding:0; list-style:none;text-align:left;">
  <div class="main" id="main1" style="width: 100%; height:100%; margin:0;padding:0; list-style:none;text-align:left; position:absolute; left: 0px;">
   <ul class="block" style= "margin:0;padding:0; list-style:none;text-align:left; "> 
   <li style= "margin:0;padding:0; list-style:none;text-align:left; ">
   <iframe runat="server" id="a1" name="a1" src="a1.htm" scrolling="yes" style="width: 100%; height:90% ; position: absolute;  border-top: #333333 1px solid;" frameborder="0"></iframe></li></ul>
   <ul style= "margin:0;padding:0; list-style:none;text-align:left; "><li><iframe runat="server" id="a2" name="a2" src="a2.htm"   scrolling="yes"  style="width: 100%; height:90%; border-top: #333333 1px solid;" frameborder="0"></iframe></li></ul>
   <ul style= "margin:0;padding:0; list-style:none;text-align:left; "><li><iframe runat="server" id="a3" name="a3" src="a3.htm"   scrolling="yes" style="width: 100%; height:90%; border-top: #333333 1px solid;" frameborder="0"></iframe></li></ul>
   <ul style= "margin:0;padding:0; list-style:none;text-align:left; "><li><iframe runat="server" id="a4" name="a4" src="a4.thm" scrolling="yes"  style="width: 100%; height:90%; border-top: #333333 1px solid;" frameborder="0"></iframe></li></ul>
  </div>
</div>
 
</form>
</body>
</html>