我希望页脚占据页面的整个宽度，但由于某种原因，当我在 safari 中预览时它不起作用（在 Dreamweaver 中看起来不错）。怎么了？我希望它被放置在页面的底部并占据整个宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Liveweave
</title>
<!-- Place cursor after this and select a
JavaScript library from the menu above -->
<!-- Supports context-sensitive CSS3 auto-completion -->
<!-- Style starts here. Try adding new CSS tags. -->
<style type="text/css">
@charset"UTF-8";
/* CSS Document */
Html, body {
padding: 0;
margin: 0;
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
background: rgb(255,255,255);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjdmN2Y3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(53%, rgba(246,246,246,1)), color-stop(100%, rgba(247,247,247,1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=1 );
/* IE6-8 fallback on horizontal gradient */
}
#header {
width: 100%;
height: 60px;
border-top: solid 4px #00539E;
}
#logo {
position: absolute;
left: 20px;
top: 35px;
color: #000;
font-size: 20px;
}
#header-text {
width: 400px;
position: absolute;
top: 70px;
left: 20px;
font-size: 12px;
font-weight: 300;
color: #333;
}
/* mainmenu */
#mainmenu {
width: 100%;
margin-right: 20px;
/* min-height: 180px;
*/
padding-bottom: 20px;
margin-top: -52px;
/* padding-top: -42px;
*/
overflow: hidden;
}
#mainmenu ul {
list-style: none;
margin: 0;
float: right;
color: #FFF;
}
#mainmenu ul li {
display: inline-block;
float: left;
width: 140px;
line-height: 18px;
}
#mainmenu>ul>li {
margin-left: 20px;
}
#mainmenu ul li a {
font-size: 12px;
display: block;
text-decoration: none;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
color: #333;
padding-left: 4px;
letter-spacing: 1px;
-moz-transition-property: all, -moz-transform;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-property: all, -ms-transform;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-property: all, -o-transform;
-o-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-property: all, -webkit-transform;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-property: all, transform;
transition-duration: .4s, .4s, .4s, .4s;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
color: #005EBC;
-moz-transition-property: all, -moz-transform;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-property: all, -ms-transform;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-property: all, -o-transform;
-o-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-property: all, -webkit-transform;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-property: all, transform;
transition-duration: .4s, .4s, .4s, .4s;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
p {
font-size: 13px;
color: #333;
font-weight: 300;
}
h1 {
font-size: 30px;
letter-spacing: 1px;
color: #0064C5;
/* display: inline-block;
*/
margin-bottom: 0;
}
h2 {
font-size: 22px;
letter-spacing: 1px;
color: #BBB;
/* display: inline-block;
*/
margin-bottom: 0;
}
H5 {
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
padding-left: 4px;
font-size: 11px;
border-bottom: 1px dotted #666;
background: rgb(29,115,196);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkNzNjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDY0YzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(29,115,196,1)), color-stop(100%, rgba(0,100,197,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d73c4', endColorstr='#0064c5', GradientType=0 );
/* IE6-8 */
}
div#content-left {
float: left;
width: 40%;
}
div#content-headline {
float: right;
width: 55%;
padding-right: 50px;
overflow: auto;
}
div#content-right {
float: right;
width: 55%;
max-height: 60%;
padding-right: 50px;
}
div#content-center {
overflow: hidden;
}
/* footer */
#main_footer {
clear:both;
position: fixed;
background: #cfc8c0;
height: 46px;
overflow: hidden;
display: block;
bottom:0;
}
#main_footer #lien_hot_news {
background: #e14242 url(pics/hot_news.gif) 50% 0 no-repeat;
color: #fff;
font: italic normal 24px Georgia, serif;
height: 38px;
width: 145px;
padding-top: 8px;
display: block;
text-align: center;
float: left;
}
#main_footer #lien_hot_news:hover {
background-color: #e92c26;
}
#main_footer #dernier_tweet {
float: left;
margin-left: 11px;
margin-top: 11px;
background: #fff url(ics/dernier_tweet_gauche.gif) 0 0 no-repeat;
position: relative;
}
#main_footer #dernier_tweet .lien_twitter {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 24px;
display: block;
}
#main_footer #dernier_tweet .inner {
max-width: 550px;
background: url(../images/picto/dernier_tweet_droite.gif) right 0 no-repeat;
padding: 4px 15px 5px 53px;
height: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#main_footer #dernier_tweet a {
color: #75716c;
}
#main_footer #dernier_tweet a:hover {
color: #444;
}
#main_footer #dernier_tweet .last_tweet {
overflow: hidden;
}
#main_footer .autres_liens {
position: absolute;
right: 12px;
top: 9px;
font: italic normal 15px Georgia, serif;
color: #95897c;
}
#main_footer .autres_liens .label {
float: left;
padding-right: 3px;
padding-top: 5px;
}
#main_footer .autres_liens a {
float: left;
display: block;
margin-left: 5px;
}
#main_footer .autres_liens a img {
width: 28px;
height: 28px;
display: block;
}
}
</style>
<!-- Style ends here -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#MetTileFive").MetTileFive({
timeInterval: 6000
}
);
}
);
</script>
<div id="header">
</div>
<div id="logo">
My Name
</div>
<div id="mainmenu">
<ul>
<li>
<h5>
Menu I
</h5>
<ul>
<li>
<a title="" href="">
Biography
</a>
</li>
<li>
<a title="" href="">
Publications
</a>
</li>
</ul>
<li>
<h5>
Menu 2
</h5>
<ul>
<li>
<a title="" href="">
Demo
</a>
</li>
<li>
<a title="" href="">
Features
</a>
</li>
<li>
<a title="" href="">
Comparison
</a>
</li>
</ul>
</li>
<li>
<h5>
Menu 3
</h5>
<ul>
<li>
<a title="" href="">
Item 1
</a>
</li>
<li>
<a title="" href="">
Item 2
</a>
</li>
<li>
<a title="" href="">
Item 3
</a>
</li>
</ul>
</li>
<li>
<h5>
Menu 4
</h5>
<ul>
<li>
<a title="" href="">
ddfd
</a>
</li>
<li>
<a title="" href="">
dsfd
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- END DIV Main Menu -->
<div id="header-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut.
</div>
<div id="content-left">
<a id="MetTileFive" class="tile-five" href="http://www.facebook.com/jEffectBox" target="_blank">
<div>
<label>
Lorem Ipsum
</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit... nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div>
<label>
Ipsum
</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit... laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div>
<label>
Lorem
</label>
<p>
Lorem ipsum dolor sit amet, consectetur a... laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</a>
</div>
<div id="content-headline">
<h1>
Novitates autem si spem
</h1>
</div>
<div id="content-right">
<p>
Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus
fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo
loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin
in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est,
quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero
in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo
valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in
quibus diutius commorati sumus.
</p>
<h2>
This is a sub-title
</h2>
<p>
Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans
terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem
sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem
Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim
itidemque Ascalonem Gazam aevo superiore exstructas.
</p>
<p>
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
calamitatum societates! Ad quas non est facile inventu qui descendant.
Quamquam Ennius recte. END END END
</p>
</div>
<footer id="main_footer">
<a href="#_" id="lien_hot_news">
Hot News
</a>
<div id="dernier_tweet">
<a href="https://twitter.com/" class="lien_twitter" target="_blank">
</a>
<div class="inner">
<!-- Ajax load to prevent cache behavior -->
</div>
</div>
<div class="autres_liens">
<div class="label">
Check us also on :
</div>
<a href="http://" target="_blank">
<img src="pics/footer_facebook_2.png" alt="facebook" />
</a>
<a href="http:/" target="_blank">
<img src="pics/footer_youtube_2.png" alt="twitter" />
</a>
<a href="http://" target="_blank">
<img src="pics/footer_slideshare_2.png" alt="slideshare" />
</a>
</div>
</footer>
</body>
</html>
</html>