IE导航在IE8或更低版本中不可见

时间：2012-05-10 07:05:01

标签： html css navigation

我想知道是否有人可以帮助我。这是我的第一个网站，尽管我尽可能地为自己解决了很多问题，但我已经达到了这样一个程度，我正盯着屏幕上运球刷着刷新键，希望通过魔法来解决它自己。

问题是虽然该网站似乎在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;
        }

2 个答案:

答案 0 :(得分：2)

您似乎需要在每个url()媒体资源的top和background之间添加空格。

答案 1 :(得分：0)

较低版本的IE具有'hasLayout'属性，该属性仅在IE中。 你可以找到它。

ul#nav {
    /* set width and height */
}

我认为这可行。

相关问题
最新问题