我想知道是否有人可以帮助我。这是我的第一个站点,尽管我已经尽力为自己解决了很多问题,但是我已经凝视着屏幕,盘旋在屏幕上,ting着嘴,按刷新键,希望魔术能够解决问题。

问题是,尽管该站点在FF,Chrome和IE9 +中似乎可以正常运行,但在IE8及以下版本中,水平导航栏不可见。应该有一个缝隙,链接可以正常工作,但子画面图像不可见。

该网站尚未在线,因此很遗憾,我无法给您链接,仅提供代码。

如果我有一个显而易见的简单答案,我太愚蠢到无法发现,我对此表示歉意。

感谢您的时间。

乔恩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<title>Alan J. Warde Chartered Surveyor</title>

</head>

<body id="home">


<div id="wrap"><!--wrap starts-->

    <a href="#"><img src="images/header.jpg" alt="header" /></a>


            <ul id="nav"><!--nav starts-->
                <li class="home"><a href="index.html">Home</a></li>
                <li class="about"><a href="about.html">About</a></li>
                <li class="services"><a href="services.html">Services</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
            </ul><!--nav ends-->


           <div id="main_content"><!--start of main_content-->

            <div id="sidebar"><!--start of sidebar-->
                <div class="listbox"><!--start of listbox-->
                <div class="inner_sidebar">
                <ul>
                  <li>Building Surveys</li>
                  <li>Valuations</li>
                  <li>Structural Engineering</li>
                  <li>Quantity Surveying</li>
                  <li>Loss Adjusting</li>
                </ul>
                </div><!--end of inner_sidebar-->
                </div><!--end of listbox-->

            </div><!--end of sidebar-->

               <div id="homecontent"><!--start of Homecontent-->
                    <div id="inner_content"><!--start of inner_content-->
                <h1>A J Warde Chartered Surveyor</h1>
                <p>CONTENT</p>

<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->


              </div><!--end of inner_content-->

              </div><!--end of Homecontent-->

             </div><!--end of main_content-->

     <div id="footer">
        <div id="footer_inside">
          Registered Company 055012
             <ul id="footer_nav"><!--nav starts-->
                <li class="home"><a href="home.html">Home</a></li>
                <li class="about"><a href="about.html">About</a></li>
                <li class="services"><a href="services.html">Services</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
            </ul><!--nav ends-->
         </div><!--end of Footer-inside-->
     </div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>






@charset "utf-8";
/* CSS Document */

/*RESETS AND BASIC SETUP*/

* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
    font: 62.5% "Times New Roman", Times, serif;
    background-color: #322e2e;
}


/*TYPOGRAPHY*/

h1 {
    padding:10px 0 20px 0;
    text-align:center;
    font-size:2.4em;
    color:#003399;
    text-shadow:1px 1px #69F;
}

h2 {
    padding:5px 0 5px 0;
    text-align:center;
    font-size:1.1em;
    color:#003399;
    text-shadow:1px 1px #69F;
}

/*BASIC ELEMENT STYLING*/

ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em;    font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}

/*END RESET*/

/*STRUCTURE AND THINGS*/


#wrap {
    width:995px; /*for IE*/
    margin:auto;
    background:url(images/content.jpg)repeat-y;
}

html>body #wrap { /*IE hack*/
    width:975px;
}


#main_content {
    padding:0;

}


#homecontent {
    background:url(images/contentimg.jpg) no-repeat;
    height:478px;
    width:633px;
    float:right;
    margin-right:12px; /*pushes div closer to left*/
    margin-top:2px;
    position:relative;


}

#servicescontent {
    background:url(images/servicesnewbg.jpg) no-repeat;
    height:478px;
    width:633px;
    float:right;
    margin-right:12px; /*pushes div closer to left*/
    margin-top:2px;
    position:relative;


}

#inner_content {
    padding:20px;
    position:relative;
}


        #contact { /*this is just to centre-align the contact details on home page*/
    position:absolute;
    left:150px;
    width: 330px;
    text-align:center;
        }
            #contact p {
                color:#0000FF;
            }

#left_col {
    border:1px solid red;
    float:left;
    height:478px;
    width:313px;
    margin-left:15px; /*pushes div closer to right*/
    margin-top:20px;
    position:relative;
}
        #contactdetails {
            position:absolute;
            left:50px;
        }

#sidebar {
    float:left;
    background:url(images/sidebar.jpg) no-repeat;
    height:478px;
    width:313px;
    margin-left:15px; /*pushes div closer to right*/
}




.inner_sidebar {
    padding:20px 0 80px 0px;
    font-size:1.4em;
}

.listbox {
    width:230px;
    margin-left:10px;
}

        .inner_sidebar ul li {
            font-size:1.4em;
            padding:5px;
            margin:5px 0 45px 5px;
            font-weight:bold;
            color:#FFF;
            border:1px solid #FFF;
            border-radius:3px;
            background-color:rgba(0, 0, 25, 0.5);
        }

/*TOP OF PAGE NAVIGATION*/

ul#nav {

}
    ul#nav li {
        display:inline;
    }
    ul#nav li a {
        display:block;
        height:54px;
        text-indent:-9999px;
        float:left;
        }

    ul#nav li.home a {
        width:404px;
        background:url(images/homenav.jpg)top center no-repeat;
    }

        ul#nav li.about a {
        width:160px;
        background:url(images/aboutnav.jpg)top center no-repeat;
    }

    ul#nav li.services a {
        width:160px;
        background:url(images/servicesnav.jpg)top center no-repeat;
    }

    ul#nav li.contact a {
        width:251px;
        background:url(images/contactnav.jpg)top center no-repeat;
    }

    ul#nav li a:hover {
        background-position: center center;
    }

    body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
        background-position: bottom center;
    }


/*FOOTER*/

#footer {
    height:96px;
    background:url(images/footer.jpg) no-repeat;
    clear:both;
}

#footer_inside {
    text-align:center;
    width:500px;
    margin:auto;
    padding:10px 0 0 0;
    color:#CCCCCC;
    font-size:1.4em;

}

ul#footer_nav li {
    display:inline;
    padding:0px;
    margin:0px;
}

    ul#footer_nav li a {
        color:white;
        text-decoration:none;
        padding:0 10px;
        border-right:1px solid white;
        line-height:25px;
    }
        ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
            border:none;
        }

最佳答案

看起来您需要在每个url()属性的topbackground之间放置空格。

关于html - 在IE8或更低版本中CSS导航不可见,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10528980/

10-11 20:14