当调整#main的宽度和高度为300px的时候,IE7就不兼容了,
而当宽度和高度为200/400px的时候页面就是好的
废话不多说上代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>我的日历</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#main{/*130*170*/
width: 300px;
height: 300px;
margin: 0 auto;
}
</style>
<style type="text/css">
.jyg_calander{
height: 100%;
width: 100%;
}
.jyg_selecter{
height: 12%;
border: 1px solid #CCC;
}
.jyg_weeks{
height: 12%;
border: 1px solid #CCC;
border-right: none;
}
.jyg_week{
width: 14.285%;
height: 100%;
float:left;
}
.jyg_week div{
width: 100%;
height: 100%;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.jyg_days{
height: 76%;
border: 1px solid #CCC;
border-right: none;
border-bottom: none;
}
.jyg_day{
width: 14.285%;
height: 100%;
float:left;
}
.jyg_day > div{
width: 100%;
height: 100%;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.jyg_day_row{
width: 100%;
height: 16.6%;
}
</style>
</head>
<body>
<div id="main">
<div class="jyg_calander">
<div class="jyg_selecter">
<table height="100%" width="100%" cellpadding="0" cellspacing="0">
<tr style="height: 100%;">
<td width="50%" align="center" valign="center">
<select>
<option>2011</option>
<option>2012</option>
<option selected="selected">2013</option>
<option>2014</option>
<option>2015</option>
</select>
</td>
<td align="center" valign="center">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option selected="selected">8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
</tr>
</table>
</div>
<div class="jyg_weeks">
<div class="jyg_week"><div>日</div></div>
<div class="jyg_week"><div>一</div></div>
<div class="jyg_week"><div>二</div></div>
<div class="jyg_week"><div>三</div></div>
<div class="jyg_week"><div>四</div></div>
<div class="jyg_week"><div>五</div></div>
<div class="jyg_week"><div>六</div></div>
</div>
<div class="jyg_days">
<div class="jyg_day_row">
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
</div>
<div class="jyg_day_row">
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
</div>
<div class="jyg_day_row">
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
</div>
<div class="jyg_day_row">
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
</div>
<div class="jyg_day_row">
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
</div>
<div class="jyg_day_row">
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
<div class="jyg_day"><div>1</div></div>
</div>
</div>
</div>
</div>
</body>
</html>
