Question

网站上的大多数页面都没有错误，但是其中一些页面的导航与内容不对齐，我错过了导航顶部的“联系”链接。该网站在Chrome和Firefox中运行良好，仅在Internet Explorer中显示这些错误。我不太明白为什么？我搜索谷歌的答案，我还没有看到任何实际工作的解决方案。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Business Learning Foundation</title>
<!--==== js image slider ====-->
<!--==== design  ====-->
<link href="staticstyle.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

.auto-style9 {
    text-align: center;
}
</style>

<!--==== browser ====-->
<!--[if lte IE 7]><link href="../design/iestyle.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 8]><style>#wrapper{width: 1020px;max-width: 1020px;min-width: 1020px;background-image: none;display: block;}
                  .auto-style1 {
                      background-color: #EF7F1A;
                  }
                  .auto-style10 {
                      color: #EF4923;
                  }
                  .auto-style11 {
                      display: inline-block;
                      height: 30px;
                      padding: 5px 0px 0px 0px;
                      font-size: 14px;
                      font-weight: normal;
                      color: #1C1C1C;
                      text-align: center;
                  }
                  </style><![endif]-->
<!--[if lt IE 9]><script src="../design/js/html5shiv.js"></script><![endif]-->

<script type="text/javascript" src="10375.js"></script>

<!--
    =====================================
    COOKIE COMPLIANCE CODE
    =====================================
   -->
    <script type="text/javascript" src="../CookieCompliance/jquery.js"></script>
    <script type="text/javascript" src="../CookieCompliance/cookie-compliance.js"></script>

   <link href="../CookieCompliance/stylesheet.css" rel="stylesheet" type="text/css" />
    <!--
    END
    =====================================
-->
</head>

<body>
<!--
    =====================================
    COOKIE COMPLIANCE CODE
    =====================================
    -->
    <div id="cookieMessageWrapper">
      <div id="cookieMessage">
        <a id="cookieClose" href="#">Close</a>
        <p>This site uses cookies. By continuing to use our website you accept 
        our use of cookies. For more information and how you can disable them 
        please <a href="../cookie_policy.php">click here</a>, or click the close 
        button on the right to hide this message.</p>
      </div>
    </div>
    <!--
    END
    =====================================
-->

<div id="menu-wrapper">
    <div id="menu" style="height: 58px">
        <ul>
            <li><a href="../index.php">Home</a></li>
            <li><a href="../open_courses/index.php">Public courses</a></li>
            <li><a href="../inhouse/index.php">In-house training</a></li>
            <li><a href="../ilm/index.php">ILM centre</a></li>
            <li class="current_page_item"><a href="../about_us/index.php">About us</a></li>
            <li><a href="../contact.php">Contact us</a></li>
        </ul>
    </div>
    <!-- end #menu -->
</div>
<div id="header-wrapper" style="height: 317px">
    <div id="header" style="height: 272px">
        <div id="logo" style="height: 223px; width: 999px;">
<p><img src="../images/logo/BLF-trans.png" alt="Business Learning Foundation" /></p>

    <div id="staticFrame" style="width: 958px;" >
        <img alt="" height="165" src="booklogo.png" style="float: left" width="238" /><!--thumbnails--><div id="thumbs" style="width: 302px; height: 173px;">
            <div class="thumb" style="height: 155px">
                <br />
                <h1>spice up your learning &amp; development with business learning 
                foundation</h1>
                <p>About us</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                    </div>

        </div>
        <!--clear above float:left elements. It is required if above #slider is styled as float:left. -->

    </div>

            <p>&nbsp;</p>
            <p>&nbsp;</p>

        </div>

        <h1><span >&nbsp;&nbsp;&nbsp; </span>&nbsp;<a href="https://www.facebook.com/pages/Business-Learning-Foundation/143795832467003?ref=hl" target="_blank"><img alt="Facebook" height="32" src="../images/social-media-icons/facebok.png" width="32" class="auto-style6" style="float: right" /></a>
        <a href="https://twitter.com/theblf_co" target="_blank">
        <img alt="Twitter" height="32" src="../images/social-media-icons/twitter.png" width="32" class="auto-style6" style="float: right" /></a>
        <a href="http://www.linkedin.com/company/2634098?trk=prof-exp-company-name" target="_blank"> 
        <img alt="Linked In" height="32" src="../images/social-media-icons/linkedin.png" width="32" class="auto-style6" style="float: right" /></a>
        <a href="https://plus.google.com/b/108614131190835211694/108614131190835211694/posts" target="_blank"> 
        <img alt="" height="32" src="../images/social-media-icons/google-plus.png" width="32" class="auto-style6" style="float: right" /></a></h1>
    </div>
</div>

<div id="menu2-wrapper">
    <div id="menu2">
        <ul>
            <li  class="current_page_item"><a href="index.php">about</a></li>
            <li><a href="history.php">history</a></li>
            <li><a href="meet_the_team.php">the team</a></li>
            <li><a href="venues.php">venues</a></li>
            <li><a href="clientlist.php">clients</a></li>
            <li><a href="testimonials.php">testimonials</a></li>
            <li><a href="../news/index.php">news</a></li>
            <li><a href="../gallery/index.php">gallery</a></li>
            <li><a href="../careers.php">careers</a></li>

        </ul>
    </div>
    <!-- end #menu -->
</div>

    <!-- end #header -->
    <div id="page">
        <div id="page-bgtop">
            <div id="page-bgbtm">
                <div id="content" style="height:808px">
                    <div class="post">
                        <div class="entry">
                            <h2> About the business learning foundation</h2>
                            <p>The Business Learning Foundation specialises in 
                            Management Development, Team Building and Business 
                            Coaching. We also have our own range of 
                            psychometrics and eBooks to support the various 
                            methods of development. We are renowned for our 
                            innovative exercises we use for our management 
                            development programmes and team builds, these 
                            re-energise the delegates and illustrate the key 
                            learning’s and messages in a way which cannot be 
                            done in the classroom.<br />
                            <br />
                            We have been running since 1985 and have built an 
                            impressive and loyal client base by delivering world 
                            class learning and development. Our clients used to 
                            stick to what they knew and repeated the work we had 
                            done with them in the past, this year we have 
                            rebranded to bring all elements of our organisation 
                            under one umbrella so that our customers could see 
                            and benefit from all the specialism’s we were able 


                    to offer them.<br />

CSS代码是：

body {
    margin: 0;
    padding: 0;
    background-color:#e5d7cc;
    font-family:"Century Gothic";
    font-size: 12pt;
    color: #3B3B3B;
    background-image:url('../images/logo/leftrighttree.png');
    background-position:left top;
    background-repeat:no-repeat;
}

h1, h2, h3 {
    margin: 0px;
    padding: 0px;
    letter-spacing: -2px;
    text-transform: uppercase;
    font-family: "Trajan Pro 3";
    font-weight: normal;
    color:#261e74;


}

h1 {
        font-size: 26px;
    font-family:"Trajan Pro 3";
    color:#3e1f00;
    letter-spacing:0.5px;

}

h2 {
    letter-spacing: 1px;
    font-size: 18px;
    border-bottom:1px #f26522 solid;
    border-top:1px #f26522 solid;
    padding:1px;
    text-align:center;
    color:#1c4297;


}


h3 {
    letter-spacing: 1px;
    font-size: 14px;
    border-bottom:1px #f26522 solid;
    border-top:1px #f26522 solid;
    padding:1px;
    text-align:center;
    color:#0487d3;

}

p, ul, ol {
    margin-top: 0;
    line-height: 180%;
}

ul, ol {
}

a {
    text-decoration: none;
    color: #ef4923;
}

a:hover {
    text-decoration: none;
    color: #0487d3;

}

.div1, .div2 {width:800px;margin:0 auto; background-color:#e5d7cc}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;background-color:#e5d7cc}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;background-color:#e5d7cc}
.floatLeft {float:left;}


/* Header */

#header-wrapper {

}

#header {
    clear: both;
    width: 1000px;
    height:416px;
    margin: 0px auto;



}

/* Logo */

#logo {
    margin: 0px;
    padding: 30px 0px;
    color: #000000;

}

#logo h1, #logo p {
    margin: 0;
    padding: 0;
}

#logo h1 {
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: lowercase;
    font-size: 10em;
    font-family: 'Yesteryear', cursive;
    font-weight: 400;
    color: #323030;
}

#logo h1 span {
    color: #F6B300;
}

#logo p {
    margin-top: -2em;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px;
    color: #3B3B3B;
}

#logo p a {
    color: #3B3B3B;
}

#logo a {
    border: none;
    background: none;
    text-decoration: none;
    color: #323030;
}

#slogan{
    height:36px;
    font-size:24pt;
    font-family:"Trajan Pro 3";
    text-align:left;
    padding-bottom:6px;


}


/* Search */
#side-label{
    width:250px;
    color:black;
    font-family:"Century Gothic";
    letter-spacing:0.5px;

}


#search {
    width: 320px;
    height: 60px;
    padding: 0px;
}

#search form {
    margin: 0px;
    padding: 0px;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search-text {
    width: 250px;
    outline: none;
    background: #F5F0E7;
    border: 1px solid #D7D0C0;
    padding: 10px;
    border-radius: 8px;
    text-transform: lowercase;
    font-family:"Century Gothic";
    color: #454545;
}

#search-submit {
    width:82px;
    padding: 5px 10px;
    background: #e5d7cc;
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family:"Century Gothic";
    font-size: 14px;
    background-image:url('../images/search.png');
    background-repeat:no-repeat;
    background-position:center;
    color: #0a4fa3;

}


/* CourseSearch */

#coursesearch {
    width: 320px;
    height: 60px;
    padding: 0px;
}

#coursesearch form {
    margin: 0px;
    padding: 0px;
}

#coursesearch fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#coursesearch-text {
    width: 250px;

    outline: none;
    background: #F5F0E7;
    border: 1px solid #D7D0C0;
    padding: 2px;
    border-radius: 8px;
    text-transform: lowercase;
    font-family:"Century Gothic";
    color: #454545;
}

#coursesearch-submit {
    width:82px;
    margin-top:10px;
    padding: 2px 5px;
    background: #e5d7cc;
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family:"Century Gothic";
    font-size: 14px;
    color: #1c4297;

}

/* Contact */

#contact {
    width: 320px;
    height: 60px;
    padding: 0px;
}

#contact form {
    margin: 0px;
    padding: 0px;
}

#contact fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#contact-text {
    width: 209px;
    outline: none;
    background: #F5F0E7;
    border: 1px solid #D7D0C0;
    padding: 2px;
    border-radius: 8px;

    font-family:"Century Gothic";
    color: #454545;
}

#contact-submit {
    width: 62px;
    height: 22px;
    display: none;
    border: none;
    color: #FFFFFF;
}



/* Menu */

#menu-wrapper {
    overflow: hidden;
    height: 56px;


}

#menu {
    width: 1000px;
    height: 55px;
    margin: 0px auto;
    padding-top:5px;
    background:#f47321 url('../images/logo/whitetree.png') no-repeat right 50%;

}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

#menu li {
    display: inline-block;
    border-right: 1px solid #FDA408;

}

#menu a {
    display: block;
    letter-spacing: 1px;
    margin: 0px 10px;
    line-height: 55px;
    padding: 0 20px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    border: none;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
    color: #3D2729;
}

#menu .current_page_item a {
}

#menu-wrapper {
    overflow: hidden;
    height: 56px;
}
/* Navigation part 2 */
#menu2 {
    width: 1000px;
    height: 30px;
    margin: 0px auto;
    padding: 0px;
    background-color:#3E1F00;
    border-radius:8px;


}

#menu2 ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

#menu2 li {
    display: inline-block;
    border-right: 1px solid #FDA408;
}

#menu2 a {
    display: block;
    letter-spacing: 1px;
    margin: 0px 10px;
    line-height: 25px;
    padding: 0 1px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family:"Century Gothic";

    font-size: 12px;
    font-weight: normal;
    color:#FFFFFF;

    border: none;
}

#menu2 a:hover, #menu2 .current_page_item a {
    text-decoration: none;
    color:#FF3300;

}

#menu2 .current_page_item a {
}
#menu2-wrapper {
    overflow: hidden;
    height: 31px;
}



/* Page */

#wrapper
{
    overflow: hidden;
    padding-bottom: 40px;
}

#page {
    overflow: hidden;
    width: 1000px;
    margin: 0px auto;
}

/* Content */

#content {
    float: left;
    width: 640px;
    height:500px;
    background-color:#ffffff;
    overflow:scroll;


}

.post {
    margin-bottom: 5px;
    padding: 10px 15px;
}

.post-alt
{
    background: #F0F0F0;
}

.post .title {
    height: 38px;
    margin-bottom: 10px;
    padding: 12px 0 0 0px;
    font-size: 32px;
}

.post .title a {
    border: none;
    color: #3D2729;
}

.post .meta {
    margin-bottom: 5px;
    padding: 5px 0px 15px 0px;
    text-align: left;
    font-weight: normal;
}

.post .meta .date {
    float: left;
}

.post .meta .posted {
    float: right;
}

.post .meta a {
}

.post .entry {
    padding: 0px 0px 20px 0px;
    padding-bottom: 5px;
    text-align: justify;

}

.links {
    display: inline-block;
    height: 30px;
    padding: 5px 0px 0px 0px;
    font-size: 14px;
    font-weight: normal;
    color: #1C1C1C;
}

.button
{
    padding: 5px 10px;
    background: #E58703;
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    color: #FFFFFF;
}

/* Sidebar */

#sidebar {
    float: right;
    width:300px;
    height:536px;
    margin: 0px;
    padding: 40px 30px 0px 30px;
    color: #787878;
    background: #f26522;
}

#sidebar p
{
    color: #3B3B3B;
}


#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar li {
    margin: 0;
    padding: 0;
}

#sidebar li ul {
    margin: 0px 0px;
    padding-bottom: 50px;
}

#sidebar li li {
    border-bottom: 1px solid #D8AD06;
    margin: 0px 0px;
    padding: 10px 0px;
    border-left: none;
}

#sidebar li li a {
    color: #3B3B3B;
}

#sidebar li li span {
    display: block;
    padding: 0;
    font-size: 11px;
    font-style: italic;
}

#sidebar h2 {
    padding-bottom: 20px;
    font-size: 18px;
    color: #3D2729;
}

#sidebar p {
    margin: 0px 0px 40px 0px;
    padding: 0px;
    text-align: justify;
}

#sidebar a {
    border: none;
}

#sidebar a:hover {
    text-decoration: underline;
}


/* Footer */

#footer {
    height: 150px;

    margin: 0 auto;
    padding: 0px 0 15px 0;
    background:#EE8A48;

    border-top: 1px solid #A59282;
    font-family: 'Arvo', serif;
}

#footer p {
    margin: 0;
    padding-top: 40px;
    line-height: normal;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #FFFFFF;
}

#footer a {
    color: #FFFFFF;
}

#banner {
    width: 1000px;
    margin: 0px auto;

}

#banner img
{
    border-radius: 8px;
    background-repeat:no-repeat;
    background-position:center;

}
/* Three Column Content */

#three-column {
    overflow: hidden;
    padding: 10px 0px 10px 0px;
    color:white;

}

#three-column #tbox1 {
    float: left;
    width: 320px;
    margin-right: 20px;


}

#three-column #tbox2 {
    float: left;
    width: 320px;
    margin-right: 20px;

}

#three-column #tbox3 {
    float: left;
    width: 320px;
}

.box-style {
background-color:#3E1F00;


}

.box-style01
{
    border-bottom: 5px solid #0F62B4;
}


.box-style02
{
    border-bottom: 5px solid #DE5635;
}

.box-style03
{
    border-bottom: 5px solid #0F62B4;
}


.box-style h2 {
    padding: 10px 0px;
    letter-spacing: -1px;
    font-size: 16px;
    color: #FFFFFF;
    width:272px;
}

.box-style .image {
    width: 272px;
}

.box-style .arrow {
}

.box-style .content {
    overflow: hidden;
    width: 300px;
    padding: 30px;
}


.divider {
    overflow: hidden;
    height: 50px;
    background: url(images/img04.png) no-repeat center top;
}
/* http://www.menucool.com */

/*slider frame*/
#staticFrame 
{
    width:950px;
    margin:0 auto; /*center-aligned*/
    padding:20px;
    border-top:1px #BE9C81 dashed;
    height:154px;

    border-bottom:1px #BE9C81 dashed;


}


/* -- thumbnails -- */
#thumbs 
{
    float:right;
    margin-left:10px;
    width:300px;
    font:normal 11px/13px Arial;

    color:#666;
    height:240px;
}
#thumbs .thumb 
{
    padding:6px 4px;
    color:fuchsia;


}
#thumbs .thumb h1
{
    padding:6px 4px;
    color:#715239;
    font-family:"Trajan Pro 3";
    letter-spacing:0.5px;
    line-height:20px;
    font-size:20px;


}
#thumbs .thumb p
{
    padding:20px 20px;
    color:#FF6600; 
    font-size:16px;
    font-family:"Century Gothic";
    text-decoration:none;
    text-transform:none;

}
#testimonial{


}

#testimonial .testimage{
    width: 20%;
    padding:10px 0px 0px 0px;
    float:left;
}

#testimonial .testcontent{

    border:1px #BE9C81 dashed;
    float:right;
    width:100%;
    margin-bottom:20px;

}

#testimonial .testcontent h1 {
    width:75%;
    float:right;
    padding:10px 10px 10px 10px;
    font-style:italic;
    color:#3E1F00;
    font-size:15px;
    text-transform:none;
    font-family:"Century Gothic";
    letter-spacing:0.1px;
}
#testimonial .testcontent h2 {

    font-weight:bold;
    color:#090071;
    border:none;
    font-size:15px;
    text-transform:none;
    font-family:"Century Gothic";
    letter-spacing:0.1px;
    width:75%;
    float:right;
    text-align:left;

}
#testimonial .testcontent p {


    font-style:italic;
    color:#CA5100;
    border:none;
    font-size:15px;
    text-transform:none;
    font-family:"Century Gothic";
    letter-spacing:0.1px;
    width:75%;
    float:right;

}
#testimonial .testcontent h4 {


    color:#622000;
    border:none;
    font-size:12px;
    text-transform:none;
    font-family:"Century Gothic";
    letter-spacing:0.1px;
    width:75%;
    float:left;
    text-align:center;
    line-height:-10px;
    width:20%;

}

Answer 1

使用float：left表示菜单LI。它将在IE中从左到右对齐所有LI。并设置保证金：自动将UL与中心对齐。

#menu2 li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;
}

#menu li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;

}

更新：

为了在UL中间隔LI，没有简单的方法使用CSS实现它，但你可以像这样使用jquery。我在CSS中使用了许多不同的方法尝试过它，但这似乎是最好的，适用于每个浏览器。

$(document).ready(function() {
    var tabs = $('#menu2').find('li');
    if (tabs.length) tabs.css('width', (100 / tabs.length) + "%");
})

CSS和页面布局不会显示在ie中，但在chrome和firefox中可以正常工作

1 个答案: