我是 CSS 新手,确实需要一些帮助来解决我刚刚完成的这个网站的问题。除了 IE7(IE8 或 IE9 必须在兼容性视图中查看)外,在 FF、safari、chrome 中一切看起来都很好(opera 看起来不错)。
当我在 IE 浏览器中查看时,上边距完全丢失,这使得它不对齐。我曾尝试从不同的站点搜索一些解决方案,但没有运气...
我知道旧的 IE 也遇到了 PNG 文件的问题,这就是问题之一(当 PNG 文件用于掩盖图像的某些部分时)——它不会显示出来。
这些图像在 IE7 上搞砸了。我无法显示任何屏幕截图,因为我的 IE8 在 CV 模式下似乎工作正常 :(
很抱歉下面的一长串代码,但我不知道它的哪一部分出错了。现场网站位于 www.heightprotectionsolutions.com.sg(在这里可能更容易查看)。任何帮助是极大的赞赏!
<body>
<div id="container">
<!-- BEGIN OF HEADER -->
<div id="header-container">
<div id="header-box">
<!-- begin of logo -->
<div id="logo">
<a href="#"><img src="images/logo_home.png" alt="main-logo" /></a>
</div>
<!-- end of logo -->
<div id="righttop-header">
<div id="top-information">
<p>For additonal information call : +65 9793 2263 | fax : +65 6748 2123</p>
</div>
<!-- begin of mainmenu -->
<div id="mainmenu">
<ul id="menu">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="services.html">services</a></li>
<li><a href="#">products</a>
<ul>
<li><a href="GFP.html">GFP</a></li>
<li><a href="innotech.html">Innotech</a></li>
</ul>
</li>
<li class="current"><a href="partners.html">partners</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<!-- end of mainmenu -->
</div>
</div>
</div>
<!-- BEGIN OF HEADER -->
<!-- BEGIN OF SLIDESHOW -->
<div id="slideshow-container">
<div id="slide-top"></div>
<ul id="slider">
<!-- begin of slide 1 -->
<li>
<div class="slide-content-wrapper">
<div class="slide-content">
<div class="slide-text">
<h1>Uncompromised Safety.</h1>
<p>The Trusted Safety Lifeline</p>
<a class="button small yellow" href="contact.html"><span>get a quote »</span></a>
</div>
</div>
<div class="slide-dot"></div>
</div>
<img src="images/slideshow/slide1.jpg" alt="" />
</li>
<!-- end of slide 1 -->
这是CSS代码。不确定我是否必须为 IE7 设置固定边距才能正常显示,就像其他浏览器一样?
#container{
margin:0px 0px 0px 0px;
}
#header-container{
width:100%;
}
#header-box{
width:1090px;
margin:0px auto;
#header-box{
margin:50px auto 0px auto;
}
}
#slideshow-container{
width:1090px;
margin:30px auto 48px auto;
}
#headerimage-container{
width:1090px;
margin:48px auto 0px auto;
}
#slide-top, #headerimage-top{
width:1090px;
height:99px;
background-image:url(../images/bg-top-slide2.png);
background-repeat:no-repeat;
position:absolute;
z-index:100;
float:left;