Question

我的网页出现问题，除了Internet Explorer之外，其他任何浏览器都可以正常查看。我已经使用Mozilla Firefox，Opera，Safari，Torch和Internet Explorer浏览器进行了测试。我知道我的CSS犯了错误，有人可以帮我，这里是html和css文件。

HTML：

<html>
    <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <title>|| My Page Tittle ||</title>
        <link href='style.css' rel='stylesheet' type='text/css'  />
    </head> 
    <body>
        <div id='container'>
            <div id='header'>
                My Header here
            </div>
            <div id='menu'>
                <ul>
                    <li><a href='#'>My MENU1</a></li>
                    <li><a href='#'>my MENU2</a></li>
                    <li><a href='#'>my MENU3</a></li>
                    <li><a href='#'>my MENU4</a></li>
                </ul>
            </div>                  
            <div id='content'>                          
                <div id='left'>                 
                    <h3>My Header</h3>
                    <p>My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
                    My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
                    My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph</p>
                </div>
                <div id='right'>
                    <p>Some Stuff will come Here Some Stuff will come Here Some Stuff will come Here</p>
                </div>                              
            </div>                  
            <div id='footer'>
                <p>And Finally the footer</p>
            </div>
        </div>
    </body>
</html>

CSS：

body {
    background: #C89D38;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px;
    font-size: 12px;    
    margin: 0px;
}

#container {
    position: relative;
    width: 900px;
    margin: auto;
    text-align: left;
}

#header {
    width: 900px;
    height: 100px;  
    background: #FFFFFF;
    margin: auto;
}

#menu {
    width: 900px;
    margin: auto;
    color: #FFFFFF;
    background: #303030;
    padding: 10px 0px 10px 0px;
    font-size: 14px;
}

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

}

#menu li {
    display: inline;
    text-align: center;
}

#menu a{
    padding: 4px 30px 10px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    height: 30px;
}

#menu a:hover {
    background-color: #C89D38;
    color: #303030;
}

#content {
    width: 820px;
    min-height: 350px;
    margin: auto;
    float: left;
    padding: 40px;
    background: #FFFFFF;
    border-top: 15px solid #C89D38;
}

#left{
    float: left;
    width: 590px;
    min-height: 350px;
    background-color: #EBE8F4;
    margin: 10px 0px;
    padding: 10px;
}

#right{
    float: right;
    width: 175px;
    min-height: 350px;
    background-color: #EBE8F4;
    margin: 10px 0px;
    padding: 10px;
}

#footer{
    width: 900px;
    height: 50px;
    margin: auto;
    padding: 0px;
    background: #FFFFFF;
    border-top: 15px solid #C89D38;
    clear: both;
}

#footer p {
    margin: 0px;
    padding: 20px 0px 20px 0px;
    color: #000000;
    text-align:center;  
}

Answer 1

以下是通过JSBin http://jsbin.com/udovup/1

预览您的网站

现在除了IE之外，其他所有内容都很好，因为您在HTML顶部缺少<!DOCTYPE html>声明。这将使IE进入Quirks模式。

因此请将其添加到HTML的顶部

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <title>|| My Page Tittle ||</title>
        <link href='style.css' rel='stylesheet' type='text/css'  />
    </head> 
.
.
.
</html>

支持Internet Explorer的css

1 个答案: