Html 布局不'；不能在不同的浏览器中很好地渲染

我正在做一个网站布局。无论如何，它仍在开发中，在谷歌浏览器和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>

下面是一个屏幕截图，它是如何在谷歌浏览器上显示的：（3个浏览器中最好的渲染）

以下是它在Firefox上显示的屏幕截图：

以下是它在Internet Explorer上显示的屏幕截图：（比firefox更好，但不像Google Chrome那样居中）

我给你一把小提琴：

下面是代码：

这里是全屏视图：

---

我提前向您表示感谢。

您可能需要在CSS上实现一些调整。但我不认为给你们一个解决这个问题的方法是一个好主意，因为你们会一次又一次地面对类似的问题。可能比你预期的要快

CSS是一个复杂的主题。当您尝试学习它时，我建议您使用CSS重置

所有浏览器都有用于呈现不同html元素的默认CSS样式，这些规则在不同浏览器之间通常是不同的

---

CSS重置是一组CSS规则，它们试图最小化浏览器之间的差异，从而在添加自己的CSS时带来更相似的体验。我建议你检查一下。查看一下want也会造成任何伤害。

对不起，我没有提到它，但我已经在网页中使用normalize.css作为css文件的附加css。关于HTML5样板，我知道它，我会在未来尝试使用它，无论如何，如果可能的话，我希望有人能帮我修复这个页面，只是现在，因为我需要它尽快工作@卡莱桑德斯

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;
}