html - 布局在不同的浏览器中呈现不佳

Question

我正在为一个网站做一个布局。无论如何，它仍在开发中，它在 Google Chrome 和 Opera 上显示得足够好，但在 Firefox 和 Internet Explorer 上却不行。在 Chrome 中它看起来不错，但可能无论如何定位都没有正确完成。你能帮我修一下吗？

HTML 正文

<div id="wrapper">
<header id="top-header">
<div id="logo1">
scritta
<img src="CS-G-100.png" class="logo" />
</div>
<nav id="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pulsante2</a></li>
<li><a href="#">Pulsante3</a></li>
<li><a href="#">Pulsante4</a></li>
<li><a href="#">Pulsante5</a></li>
</ul>
</nav>
<div id="kenburns" class="slideshow">
    <img src="images/1.jpg" alt="1">
</div>
</header>
<section id="main-section">
<aside id="left">
</aside>
<article id="main-content">
</article>
<aside id="right">
</aside>
<footer id="the-footer">
<div id="center-footer">
Centro fisioterapico San Giusto Via Romana Est 78/2 Porcari p. iva : 01532540463
</div>
</footer>
</section>
</div>

CSS

body {

width:100%;
margin:18px 20px 20px 20px;
display: box;                     /* As specified */
display: -moz-box;                /* Mozilla */
display: -webkit-box;             /* WebKit */
box-pack: center;                  /* As specified */
-moz-box-pack: center;             /* Mozilla */
-webkit-box-pack: center;          /* WebKit */
background-attachment: fixed;
background-image: url(sfondo-6.png);
background-repeat: repeat;
}

#wrapper {
border: 1px solid black;
width:1024px;
height:768px;
padding: 20px;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1)  100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color- stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */

}
#top-header {
position:absolute;
width:1022px;
height:234px;
display:block;
border:1px solid black; 
z-index:1;
background-color:#d2e5e3;
}

#top-nav {
position:relative;
width:700px;
display:block;
border:1px solid black;
top:-119px;
right:-321px;
z-index:2;
background-color:#d2e4e8;
}

#top-nav li {
display: inline;
/* Align children to the horizontal center of this box */
box-align: center;              /* As specified */
-moz-box-align: center;         /* Mozilla */
-webkit-box-align: center;      /* WebKit */
list-style:none;
text-align:center;
width:120px;
height:25px;
background:#5DBCD2;
opacity:0.7;
border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
transition:transform 2s, opacity 2s, background 2s;
-webkit-transition::transform 2s, opacity 2s, background 2s;
-moz-transition:transform 2s, opacity 2s, background 2s;
-o--transform 2s, opacity 2s, background 2s;
}

#top-nav-li:hover {
transform-rotate:(360deg);
-webkit-transform:(360deg);
-moz-transform:rotate(360deg);
opacity:1px;
background:#0F3;
}

#top-nav li {
display:inline-block;   
}

#left-nav {
position:absolute;
border:1px solid black;
padding:0px;
left:0px;
top:0px;
z-index:2;
text-decoration:none;


}

#left-nav ul {
position:relative;
left:0px;
display:block;  
}

#left-nav li {
margin:0px opx 10px 0px;
display:block;
position:relative;
border-radius:0px 10px 0px 10px;
-webkit-border-radius:0px 10px 0px 10px;
-o-border-radius:0px 10px 0px 10px;
-moz-border-radius:0px 10px 0px 10px;
-ms-border-radius:0px 10px 0px 10px;
background-color:#9ED09D;
transition:opacity 2s;
-moz-transition:opacity 2s;
-o-transition:opacity 2s;
-webkit-transition:opacity 2s;
}

#left-nav li:hover {
opacity:1;  
}


#left {
position:relative;
float:left;
border: 1px solid black;
padding: 20px;
width:256px;
height:620px;

}

#right {
float:left;
border: 1px solid black;
padding:20px;
width:256px;
height:620px;
}


#main-content {
float:left;
border: 1px solid black;
padding:20px;
width:386px;
height:620px;
}

#the-footer {
display:table;
clear:both;
width:100%;
height:50px;
border:1px solid black;
}

#rollover {
position:relative;
top:-112px;
left:490px;
border:1px solid black;
width:500px;
height:200px;
background-color:#FFFFFF;

}

#logo1{
position:relative;
top:47px;
left:20px;
}

.logo {

}

.center-text {
vertical-align:middle;
text-align:center;  
}

#center-footer {
display:table-cell;
vertical-align:middle;
text-align:center;
margin:0px auto;
}

下面是它在谷歌浏览器上的显示截图：（3的最佳渲染）