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

【问题标题】：CSS and page layout won't display in ie but will work fine in chrome and firefoxCSS 和页面布局不会在 ie 中显示，但在 chrome 和 firefox 中可以正常工作
【发布时间】：2013-11-07 00:18:12
【问题描述】：

网站上的大多数页面都可以正常工作，但其中一些页面的导航与内容不符，我错过了导航顶部的“联系人”链接。该网站在 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%;

}

【问题讨论】：

  • 我建议将标记和 css 缩小到给您带来麻烦的部分。这样你可能会有更好的机会。制作一个 jsfiddle.net 也很棒。
  • 啊。我没有 IE 来检查这个问题。无论如何，IE 不支持现代 css 标签，这就是为什么您的网站在 IE 中的行为不同的原因。您必须指定 IE 版本，因为并非所有 IE 都有相同的问题。缩小问题范围将很容易找到解决方案:)
  • 版本即10，版本号：10.0.09200.16721
  • 我无法缩小问题范围？
  • 问题可能与您的文档类型前面的空白有关。这是一个已知问题，这有时会导致 IE 忽略 doctype 并进入 quirks 模式。

标签： html css internet-explorer


【解决方案1】：

对菜单 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) + "%");
})

【讨论】：

  • 谢谢，这已经修复了我丢失的“联系人”链接...关于 Internet Explorer 左侧菜单 2 的任何想法？我试过浮动，但它似乎没有任何区别？
  • jquery 脚本到底应该放在哪里？
  • 我已经修复了一些错误，并且该网站在我的计算机上的所有浏览器中都可以正常显示，但是当我在其他人的笔记本电脑/平板电脑上进行测试时......我得到了原始错误。我不明白为什么，当浏览器版本相同时？
  • 你如何在另一台电脑上测试它？您是否已将代码部署到某处？
猜你喜欢
  • 1970-01-01
  • 2018-07-15
  • 1970-01-01
  • 1970-01-01
  • 2012-05-02
  • 2014-04-21
  • 2012-11-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode