Question

我是CSS的新手，在我刚刚完成的网站排查中真的需要一些帮助。除了IE7（必须在兼容性视图中查看IE8或IE9）之外，FF，safari，chrome（歌剧看起来还不错）的一切看起来都很好。

当我在IE浏览器中查看时，上边距完全丢失，这使得它不对齐。我试图从不同的网站搜索一些解决方案，但没有运气......

我知道旧版IE也存在PNG文件问题，这是其中一个问题（当PNG文件用于屏蔽图像的某些部分时） - 它不会显示出来。 / p>

这些图像搞砸了IE7。我无法显示任何screencap，因为我的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 &nbsp;&raquo;</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;

与IE7的兼容性问题（上边距完全搞砸了）

0 个答案: