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

Question

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

  <!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%;

}

score 0 · Accepted Answer

对菜单 LI 使用 float:left。它将在 IE 中从左到右对齐所有 LI。并设置 margin: auto 将 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) + "%");
})

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

1 回答 1

Related

Reference