标签：
关于一个利用relative的简单布局，firefox上出现一点问题，暂且不明原因
firefox的
chrome的
代码记录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>anime</title> </head> <style> div#all { margin: 0 auto; width: 1024px; height: 700px; } div.header { width: 100%; height: 80px; background-color: beige; } div.sidebar { width: 15%; height: 460px; background-color: chocolate; } div#nav ul { width: 85%; margin: 0 auto; list-style-type: none; position: relative; top: -460px; left: 57px; } div#nav ul li { float: left; } div#nav ul li a { width:145px; height: 28px; background:cornflowerblue; color: white; display: block; text-align: center; text-decoration: none; } div#nav ul li a:hover { width: 145px; height: 26px; line-height: 28px; color: cornflowerblue; background: white; } div.content { width: 85%; height: 432px; background-color: darkseagreen; position: relative; top: -432px; left: 154px; } div.footer { width: 100%; height: 50px; background-color: burlywood; position: relative; top: -432px; </style> <body> <div id="all"> <div class="header"></div> <div class="sidebar"></div> <div id="nav"> <ul class="nav-content"> <li><a href="#">首页</a></li> <li><a href="#">动画</a></li> <li><a href="#">漫画</a></li> <li><a href="#">小说</a></li> <li><a href="#">讨论</a></li> <li><a href="#">下载</a></li> </ul></div> <div class="content"> <div class="content-1"></div> <div class="content-2"></div> <div class="content-3"></div></div> <div class="footer"></div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/hazemiku/p/4908961.html
