我有一个带有页脚的网站,在Chrome和Safari中显示良好。
然而,当在Mozilla Firefox中查看时,页脚不在页面底部,而是从标题下方开始,它遍布整个页面。
这与在火狐中使用 and 标签有关吗?或者别的什么。
<!doctype html>
<html>
<head>
Stuff.....
</head>
<body>
<header>
Stuff....
</header>
<div id="main_container">
<div id="content_container">
Text (h1, h2 and p tags)
</div>
<div id="networking_container">
<div id="twitter">
Twitter Feed...
</div>
<div class="fb-like" id="facebook" data-href="http://www.facebook.com/EtempaSolutions" data-send="true" data-layout="button_count" data-width="225" data-show-faces="false">
</div>
<g:plusone size="medium" annotation="inline" width="215"></g:plusone>
</div>
<footer>
<table id="favourite_links_table" cellpadding="4">
Stuff...
</table>
<div id="credits">
<p id='main_credit'>This website has been designed and hosted by <a href='http://www.etempa.co.uk'>Etempa Solutions</a></p>
<p id='sub_credit'>Web Design, Including Coding and Images © Copyright to Pippa Rose Smith 2012. All Rights Reserved</p>
</div>
</footer>
</body>
</html>
css 位是:
html
{
padding: 30px 10px;
line-height: 1.4;
background-color: #CCC;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html, input
{
font-family: Candara, Verdana, Geneva, sans-serif;
}
body
{
width: 860px;
padding: 20px 30px 20px;
border: 1px solid #b3b3b3;
border-radius: 4px;
margin: 0 auto;
box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
background: #fcfcfc;
}
footer
{
margin-top: 30px;
}
#main_container
{
clear: both;
padding-top: 15px;
}
#favourite_links_table
{
text-align: center;
width: 850px;
}
#credits
{
margin-top: 30px;
}
#main_credit
{
color: #9933FF;
font-size: 13px;
text-align: center;
}
#sub_credit
{
color: #9933FF;
font-size: 12px;
text-align: center;
}
#content_container
{
float: left;
width: 70%;
}
#networking_container
{
float: right;
width: 25%;
}
#twitter
{
padding-top: 30px;
padding-bottom: 20px;
}
#facebook
{
padding-bottom: 20px;
}
我已经找到了答案
我已经添加了清晰的:两者都到我的页脚,所以 css 现在是
footer
{
margin-top: 30px;
clear: both;
}