我的CSS不在IE中工作

Question

我正在使用PHP，我有一个CSS文件。在Mozilla和Chrome中，一切都运行良好，但它在IE中无效。

某些类似.Mainheader nav的CSS无法在IE中运行。如何管理我的页面，使其在不同的屏幕分辨率下看起来相同？

HTML：

 <header class="mainHeader" > 
<nav>
<ul>
 <li >
<a href="index.php">Home</a>
</li>
 <li >
<a href="about_us.php">About Us</a>
</li> 
<li>
<a href="#">How It Works</a>
</li>
 <li>
<a href="contact_us.php">Contact</a>
</li> 
<li>
<a href="register.php">Manufacturer Register</a>
</li> 
</ul>
</nav>
</header> 

这是我的css代码：

/* ===========================
   ======= Body style ======== 
   =========================== */

body {
    background-image: url('img/bg.png');
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }

.body {
    clear: both; 
    margin: 0 auto; 
    width:60%;
}

.divimg{
    margin-left:480px;margin-top:-40px;
}
.divchat{
    margin-left:610px;margin-top:-60px;
}

.reginput
{
    width:250px;
    height:25px;
    border:1px solid gray;
    border-radius:5px;
    margin:5px;
}   
    a.one {text-decoration:none}
a.one:link {color:#CF5C3F;}
a.one:visited {color:#CF5C3F}
a.one:active {color:#CF5C3F}
a.one:hover {color:#CF5C3F;background-color:#FFFFFF;}
/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em}     /* 14px */

h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .8em;
}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */

.mainHeader nav {
    background: #666666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 0px auto;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left; 
    display: inline; 
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}

.mainHeader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader img {

    height: auto;
    margin: 1% 0;
}

/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width:750px;
}

.topcontent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 0% 0%; 
    margin-bottom: 3%;
}

.bottomcontent {
    background-color: #FFF; 
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 3% 5%;
}

.content {


    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
}

/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
    margin-bottom: 2%;
}

.middle-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
    margin-bottom: 2%;
}

.bottom-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
}

.btnstyle{
    background-color:#00E6E6;
    border:1px solid #000;
    padding:5px;
    border-radius:5px;
    color:#FFFFFF;
}

/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
    width: 100%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    color: #FFF;    
}

.mainFooter p {
    width: 91%;
    margin: 2% auto;
}

/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 1024px)
{
    .body {
        clear: both; 
        margin: 0 auto; 
        width: 90%;
        font-size: 90%;
    }

    .mainHeader nav {
        background: #666;
        font-size: 1.143em;
        height: 200px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader nav ul {
        list-style: none; 
        margin: 0 auto;
        padding-left: 0;
    }

    .mainHeader nav li {
        margin-left: 0 auto;
        width: 100%;
    }

    .mainHeader nav a:link, .mainHeader nav a:visited {
        color: #FFF;
        display: block;
        height: 30px;
        padding: 5px 0;
        text-decoration: none;
    }

    .mainHeader nav a:active,
    .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
        background: #CF5C3F;
        color: #fff;
        text-shadow: none !important;
    }

    .mainHeader nav li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader img {
        width: 100%;
        height: auto;
        margin-bottom: 3%;
    }

    .mainContent {
        overflow: hidden;
        line-height: 25px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin-top: 4%;
        margin-bottom: 2%;
    }

    .topcontent {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 0% 0%;
        margin-bottom: 4%;
    }

    .bottomcontent {
        background-color: #FFF; 
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 2% 5%;
    }

    .content {
        width: 100%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
    }   

    .post-info {
        display: none;
    }

    .top-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;       
    }

    .top-sidebar p {
        width: 90%;
    }

    .middle-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;   
    }

    .middle-sidebar p {
        width: 90%;
    }

    .bottom-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0%;
        padding: 0 7%;
        margin-bottom: 1%;
    }

    .bottom-sidebar p {
        width: 90%;
    }

    .mainFooter {
        width: 100%;
        float: left;
        margin: 2% 0;
        padding-left: 0;
        background-color: #666;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        color: #FFF;    
    }

    .mainFooter p {
        width: 86%;
        margin: 2% auto;
    }

    .divimg{
    margin-left:0px;margin-top:0px;text-align:center;
}
.divchat{
    margin-left:0px;margin-top:0px;text-align:center;
}

    .divimg img { max-width: 10%; }
    .divchat img{
    max-width: 30%;
}

.reginput
{
    width:250px;
    height:25px;
    border:1px solid gray;
    border-radius:5px;
    margin:5px;
    text-align:center;
}
}

Answer 1

您使用的是哪个版本的IE？ IE对HTML 5的支持较少。请阅读以下问题，这些可能会对您有所帮助：

header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

html5 new elements (header, nav, footer, ..) not working in IE

还有这个

http://www.impressivewebs.com/html5-support-ie9/

Answer 2

要添加altafhussain的答案，请查看ie-7.js / ie-9.js。

https://code.google.com/p/ie7-js/

这是一个可以嵌入的小Javascript（查看链接页面上的文档）。它自动使IE7和IE8支持HTML5标签，和。它还允许使用例如：before和：after伪类

Answer 3

我不知道它是否与intval相同，但这是另一种帮助IE 8理解HTML5的方法：

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Google Code HTML5 for IE