-3

我的网页出现问题，使用 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;  
}
4

1 回答 1

2

这是通过 JSBin http://jsbin.com/udovup/1预览您的网站

<!DOCTYPE html>现在这在除了 IE 之外的所有地方看起来都很好，因为您在 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>
于 2013-05-23T14:33:38.610 回答