我正在尝试创建带有部分的网页，每个部分都有标题，一段文字和一个徽标。
我正在使用以下代码，适用于IE11，但我在不同的broswers中有兼容性错误。一些IE浏览器在部分div上方显示了额外的空间，而其他用户在向上/向下滚动页面时报告文本消失。
任何人都可以为我的代码建议任何改进措施，以缓解这些兼容性问题
HTML
<!--START CONTENT-->
<div id="content">
<!--START OF SECTION-->
<div id="first" class="">
<div id="centercontain">
<!--TITLE-->
<div id="" class="lefttitle">
<h1>Virtualisation<h1>
</div>
<!--SUB MENU-->
<div id="prodnavcontain">
<a href="#vsphere"><div class="title2">
<div class="triangle"></div>
VMware vSphere
</div></a>
<a href="#hyper"><div class="title2">
<div class="triangle"></div>
Microsoft Hyper-V
</div></a>
<a href="#san"><div class="title2">
<div class="triangle"></div>
SAN & NAS Storage
</div></a>
<a href="#"><div class="title2">
<div class="triangle"></div>
Datacentre Networking
</div></a>
<a href="#"><div class="title2">
<div class="triangle"></div>
Backup and Disaster Recovery
</div></a>
<a href="#"><div class="title2">
<div class="triangle"></div>
Offsite Failover
</div></a>
</div> <!-- END OF SUB MENU-->
<!--DETAIL-->
<div id="" class="leftdetail">
<p>Virtualisation first gained popularity as a tool for server consolidation. Large fleets of aging servers were virtualised onto a handful of modern servers providing far better resource utilisation. Fast-forward and Virtualisation now enables rapid deployment, reliability and new ways of working automated provisioning, virtual machine replication and virtual desktop.<br><br>
With increased reliance on virtualisation, it is important to choose server, storage and network components deployed in configurations which have been tested for compatibility and performance.<br><br>
Using Indigo's experience ensures that you get maximum performance and reliability from your virtualisation deployment, properly integrated into your existing IT infrastructure.
</p>
</div> <!--END OF DETAIL-->
</div> <!--END CENTER CONTAIN-->
</div> <!-- END OF SECTION-->
<!--START OF SECTION-->
<div id="vsphere" class="">
<div id="centercontain">
<!--TITLE-->
<div id="" class="lefttitle">
<h1>VMware vSphere<h1>
</div>
<!--DETAIL-->
<div id="" class="leftdetail">
<!--GRAPHIC-->
<div id="vmpiccon">
<img src="../images/vmware_vsphere.png" alt="vSphere" height="190" width="190">
</div>
<p>Virtualisation first gained popularity as a tool for server consolidation. Large fleets of aging servers were virtualised onto a handful of modern servers providing far better resource utilisation. Fast-forward and Virtualisation now enables rapid deployment, reliability and new ways of working automated provisioning, virtual machine replication and virtual desktop.<br><br>
With increased reliance on virtualisation, it is important to choose server, storage and network components deployed in configurations which have been tested for compatibility and performance.<br><br>
Using Indigo's experience ensures that you get maximum performance and reliability from your virtualisation deployment, properly integrated into your existing IT infrastructure.
</p>
</div> <!--END OF DETAIL-->
</div> <!--END CENTER CONTAIN-->
</div> <!-- END OF SECTION-->
<!--START OF SECTION-->
<div id="hyper" class="">
<div id="centercontain">
<!--TITLE-->
<div id="" class="righttitle">
<h1>Microsoft Hyper-V<h1>
</div>
<!--DETAIL-->
<div id="" class="rightdetail">
<p>Virtualisation first gained popularity as a tool for server consolidation. Large fleets of aging servers were virtualised onto a handful of modern servers providing far better resource utilisation. Fast-forward and Virtualisation now enables rapid deployment, reliability and new ways of working automated provisioning, virtual machine replication and virtual desktop.<br><br>
With increased reliance on virtualisation, it is important to choose server, storage and network components deployed in configurations which have been tested for compatibility and performance.<br><br>
Using Indigo's experience ensures that you get maximum performance and reliability from your virtualisation deployment, properly integrated into your existing IT infrastructure.
</p>
<!--GRAPHIC-->
<div id="hyperpiccon">
<img src="../images/hyperv.png" alt="vSphere" height="225" width="225">
</div>
</div> <!--END OF DETAIL-->
</div> <!--END CENTER CONTAIN-->
</div> <!-- END OF SECTION-->
<!--START OF SECTION-->
<div id="san" class="">
<div id="centercontain">
<!--TITLE-->
<div id="" class="lefttitle">
<h1>SAN & NAS Storage <h1>
</div>
<!--DETAIL-->
<div id="" class="leftdetail">
<!--GRAPHIC-->
<div id="sanpiccon">
<img src="../images/san.png" alt="vSphere" height="115" width="115">
</div>
<p>Virtualisation first gained popularity as a tool for server consolidation. Large fleets of aging servers were virtualised onto a handful of modern servers providing far better resource utilisation. Fast-forward and Virtualisation now enables rapid deployment, reliability and new ways of working automated provisioning, virtual machine replication and virtual desktop.<br><br>
With increased reliance on virtualisation, it is important to choose server, storage and network components deployed in configurations which have been tested for compatibility and performance.<br><br>
Using Indigo's experience ensures that you get maximum performance and reliability from your virtualisation deployment, properly integrated into your existing IT infrastructure.
</p>
</div> <!--END OF DETAIL-->
</div> <!--END CENTER CONTAIN-->
</div> <!-- END OF SECTION-->
</div> <!-- END OF CONTENT-->
CSS
#content {
padding: 0px;
padding-bottom:0px; /* Height of the footer element */
}
#bottombar {
background-color: #dfdfdf;
border-top: 1px solid #a4a4a4;
bottom: 0;
color: #fff;
height: 35px;
left: 0;
position: absolute;
width: 100%;
}
#prodnavcontain {
float: right;
height: 400px;
position: relative;
right: 0;
top: -33px;
width: 159px;
}
.triangle {
border-color: transparent transparent transparent #464646;
border-style: solid;
border-width: 6px 0 6px 10px;
height: 0;
margin-left: 244px;
margin-top: 19px;
position: absolute;
width: 0;
}
#centercontain{
width: 990px;
margin: 0 auto;
}
#first{
height: 350px;
width: 100%;
position: relative;
background-color: #464646;
top: 0px;
}
#vsphere{
height: 350px;
width: 100%;
position: relative;
background-color: #ededed;
top: 0px;
}
#hyper{
height: 350px;
width: 100%;
position: relative;
background-color: #fff;
top: 0px;
}
#san{
height: 350px;
width: 100%;
position: relative;
background-color: #ededed;
top: 0px;
}
.lefttitle{
top: 32px;
left: 0px;
position: relative;
}
.righttitle{
top: 32px;
padding-left: 296px;
position: relative;
}
.leftdetail {
left: 0;
position: relative;
top: 62px;
width: 695px;
}
.rightdetail {
left: 297px;
position: relative;
top: 62px;
width: 695px;
}
#vmpiccon {
left: 747px;
position: absolute;
top: -19px;
}
#hyperpiccon {
left: -301px;
position: absolute;
top: -47px;
}
#sanpiccon {
left: 797px;
position: absolute;
top: 24px;
}
.title2 {
background-color: #fff;
border: 1px solid #464646;
box-sizing: border-box;
color: #000;
display: block;
float: right;
font-size: 16px;
height: 58px;
left: 0;
line-height: 58px;
opacity: 0.85;
padding-left: 10px;
position: static;
text-align: left;
top: 0;
vertical-align: middle;
width: 280px;
}
.title2:hover {
background-color: #fff;
filter: alpha(opacity=95);
opacity: .95;
}
非常感谢任何帮助。
PS。我的DEV页面的副本可以在这里找到：http://goo.gl/ww0hse
谢谢，
答案 0 :(得分：0)
从position: relative;
#wrapper移除style.css(line 20)
#wrapper {
min-height: 100%;
overflow: hidden;
/*position: relative;*/
}