<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
header{height:100px;background:#9F3; display:block;}
article{ padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative; display:block;}
aside{width:200px;height:300px;background:#F06; position:absolute;left:10px;top:10px; display:block;}
section{margin-left:210px;background:#F90;height:300px; display:block;}
footer{ height:100px;background:#C6C; display:block;}
</style>
</head>
<body>
<header>页面头部</header>
<article>
<aside>侧边栏</aside>
<section>内容区域</section>
</article>
<footer>页面底部</footer>
</body>
</html>
在高版本浏览器是这样的
在低版本里面是这样的
如何处理
在IE下提供了一种自定义标签的方法
document.createElement(“”)并且给标签添加类型display:block
或者引入JS文件<script src="html5shiv.js"></script>即可。
扫一扫
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
