Question

我遇到了IE9的问题，我也假设8及以下。下面是我的.CSS。它在Chrome，Safari和FireFox中运行良好。我试图避免为IE创建单独的.CSS。对不起，这是我第一次发帖，如果您需要更多信息请告诉我。

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    background-image: url('../images/white_side.jpg');
}
#container {
    width: 1280px;
    margin: 0 auto;
    margin-top: -10px;
    align: center;
}
#masthead {
    width: 100%; 
    height: 170px;
    background-image: url('../images/header.jpg');
    background-repeat: no-repeat;
}
#content {
    float: left;
    width: 100%;
    background-image: url('../images/background.jpg');
    background-repeat: no-repeat;
}
#footer {
    text-align: center;
    clear: both;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #a9a9a9;
    border-bottom: 1px solid #a9a9a9;
}
#footer p {
    color: #DD7500;
    margin-top: 5px;
}
#footer a {
    color: #DD7500;
    text-decoration: underline;
}
#footer a:hover {
    color: black;
    text-decoration: none;
}
#menu{
    float: left;
    list-style-type: none;
    margin-top: 95px;
    margin-left: -40px;
}
#home{
    float: left;
    list-style-type: none;
}
#post{
    float: left;
    list-style-type: none;

}
#input{
    float: left;
    list-style-type: none;
    margin-left: 100px;
    margin-top: 15px;
}
#search{
    width: 210px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}
#deals{
    float: left;
    list-style-type: none;
    margin-left: 90px;
}
#login{
    float: left;
    list-style-type: none;
}
#registrationul{
    float: right;
    list-style-type: none;
    margin-top: -20px;
}
#welcome{
    float: left;
    list-style-type: none;
}
#register{
    float: left;
    list-style-type: none;
}
#loginContainer {
    position:relative;
    float:right;
    font-size:12px;
}
#loginButton { 
    float:right;
    position:relative;
    z-index:30;
    cursor:pointer;
}
#loginButton img {
    color: white;
    font-size:24px; 
    background-image:url(../images/login.jpg) no-repeat ;
}
#loginButton:hover {
    background-image:url(../images/loginafter.jpg);
}
#loginBox {
    position:absolute;
    top: 70px;
    right: 0px;
    display:none;
    z-index:29;
}
#loginForm {
    width:248px; 
    -moz-border-radius:3px 0 3px 3px;
    margin-top:-1px;
    padding:6px;
}
#loginForm fieldset {
    margin:0 0 12px 0;
    display:block;
    border:0;
    padding:0;
}
fieldset#body {
    background-color: rgba(0,0,0,0.4);
    -moz-border-radius:3px;
    padding:10px 13px;
    margin:0;
}
#body label {
    color: white;
    margin:9px 0 0 0;
    display:block;
    float:left;
}
#loginForm #body fieldset label {
    display:block;
    float:none;
    margin:0 0 6px 0;
}
#loginForm input {
    width:92%;
    border:1px solid #899caa;
    border-radius:3px;
    -moz-border-radius:10px;
    color:#3a454d;
    font-weight:bold;
    padding:8px 8px;
    box-shadow:inset 0px 1px 3px #bbb;
    -webkit-box-shadow:inset 0px 1px 3px #bbb;
    -moz-box-shadow:inset 0px 1px 3px #bbb;
    font-size:12px;
}
#loginForm #login {
    width:auto;
    float:left;
    color:black;
    padding:7px 10px 8px 10px;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    margin:0 12px 0 0;
    cursor:pointer;
    padding:7px 2px 8px 2px; /* IE7 Fix */
}
#loginForm span {
    background-color: rgba(0,0,0,0.4);
    text-align:center;
    display:block;
    padding:7px 0 4px 0;
}
#loginForm span a {
    color:white;
    font-size:12px;
}
#rightpannel{
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    width: 600px;
    height: 350px;
    background: rgba(0, 0, 0, 0.5);
}
#bottompannel{
    margin-top: 400px;
    margin-left: 20px;
    width: 1240px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
}
#leftpannel{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    width: 600px;
    height: 350px;
    background: rgba(0, 0, 0, 0.5);
}

Answer 1

IE的解析器远不如Webkit（Chrome / Safari）或Gecko（Firefox）容错。通过validation service运行您的代码。有一个很好的机会，你忘了关闭一个标记混乱的标签（我说的是个人经验）。

Answer 2

您忘记在导航菜单中清除浮动...

<ul id="registrationul">
  <li id="welcome"></li>
  <li id="register"><a id="userButton" href="register.php"><img onmouseout="hideIt(this, 'images/register_plain.jpg')" onmouseover="showIt(this, 'images/register_hover.jpg')" id="imageshow6" alt="" src="images/register_plain.jpg"><em></em></a></li>
</ul>
<div style="clear:both;"></div><!-- clears floated elements (in this case ul#menu and ul#registrationul) -->

Answer 3

如果没有doctype，你永远不会让IE尝试像其他更现代的浏览器一样。现代网页需要doctype，如果没有，则处于怪癖模式。将其添加为第一行：<!DOCTYPE html>

IE9与HTML和CSS有关

3 个答案: