51,396
社区成员
发帖
与我相关
我的任务
分享HTML5标准，body高度问题
在IE9下，一下代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<Link Rel="STYLESHEET" Href="hs.CSS" Type="text/css">
<title>Supcon Get view </title>
<style type="text/css">
html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
.a1{width:100%; height:100%; color:#fff; background-color:#369; text-align:center;}
</style>
</head>
<body>
<table height="100%" width="100%">
<tr width = "100%">
<td>
<table align="center" width = "100%" height = "100%">
<tr>
<td>
<div class="a1">div1</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
和
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<Link Rel="STYLESHEET" Href="hs.CSS" Type="text/css">
<title>Supcon Get view </title>
<style type="text/css">
html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
.a1{width:100%; height:100%; color:#fff; background-color:#369; text-align:center;}
</style>
</head>
<body>
<table height="100%" width="100%">
<tr width = "100%">
<td>
<table align="center" width = "100%" height = "100%">
<tr>
<td>
<div class="a1">div1</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代码，两个代码只缺少<!DOCTYPE html>
执行出来的效果，完全不一样。为什么？
怎么将加了<!DOCTYPE html>的代码执行的效果和没有加执行的效果变成一致，怎么改。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<Link Rel="STYLESHEET" Href="hs.CSS" Type="text/css">
<title>Supcon Get view </title>
<style type="text/css">
html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
.a1{width:100%; height:100%; color:#fff; background-color:#369; text-align:center;}
</style>
</head>
<body>
<table height="100%" width="100%">
<tr width = "100%">
<td>
<table align="center" width = "100%" height = "100%">
<tr>
<td>
<div class="a1">div1</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
和
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<Link Rel="STYLESHEET" Href="hs.CSS" Type="text/css">
<title>Supcon Get view </title>
<style type="text/css">
html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
.a1{width:100%; height:100%; color:#fff; background-color:#369; text-align:center;}
</style>
</head>
<body>
<table height="100%" width="100%">
<tr width = "100%">
<td>
<table align="center" width = "100%" height = "100%">
<tr>
<td>
<div class="a1">div1</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代码，两个代码只缺少<!DOCTYPE html>
执行出来的效果，完全不一样。为什么？
怎么将加了<!DOCTYPE html>的代码执行的效果和没有加执行的效果变成一致，怎么改。
...全文
请发表友善的回复…
发表回复
limanman7080 2016-04-20
- 打赏
- 举报
感谢老王送分 
qq_33211559 2016-04-20
- 打赏
- 举报
感谢老王送分
虫虫爬呀爬 2016-04-20
- 打赏
- 举报
感谢老王送分
cnsqq_mapan 2016-04-20
- 打赏
- 举报
感谢老王送分
河豚 2016-04-20
- 打赏
- 举报
这节奏，分数都没人要的吗
河豚 2016-04-15
- 打赏
- 举报
知道问题了。
因为HTML5的body高度设置以后，某个子项的高度没有设置的话，其子项的子项的高度就无效。所以两个代码执行不一致。
只需要将第一个修改为
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<Link Rel="STYLESHEET" Href="hs.CSS" Type="text/css">
<title>Supcon Get view </title>
<style type="text/css">
html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
.a1{width:100%; height:100%; color:#fff; background-color:#369; text-align:center;}
</style>
</head>
<body>
<table height="100%" width="100%">
<tr width = "100%" height=“100%”>
<td height=“100%”>
<table align="center" width = "100%" height = "100%">
<tr height=“100%”>
<td height=“100%”>
<div class="a1">div1</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
