Question

我无法让IE8识别边距，我有一个徽标，我希望在带有左边距的标题div中垂直居中，但它似乎被忽略但在Chrome，Firefox和Safari中显示正常。此外，我有一个登录/注册div应该在标题div的右上角，有一些顶部和右边距，但它们也被忽略。我将在这篇文章中包含JSFiddle链接以及代码。这是它在IE中的样子 enter image description here 这是它应该是什么样子

的jsfiddle http://jsfiddle.net/ARhRt/

<html>
    <head>
        <title>
        TESTING    
        </title>
        <LINK href="CLLProfile.css" rel="stylesheet" type="text/css">


    </head>

    <body>
        <div id="wrapper">
        <div class="container">

            <div id="header">
                <img src="http://www.placekitten.com/400/100">

                <div class="login"> 
                    <a href="http://www.signup.com">Sign Up</a> <a href="http://www.login.com">Login</a>
                </div>

                <div class="search">
                    <form id ="search" action="" method="post" enctype="multipart/form-data">
                        <label>Search:</label>
                        <input type="text" name="searchBox" id="searchBox" /> 
                        <input type="submit" id="Submit" value="Submit" />
                    </form> 
                </div>

            </div>

            <div class="navigation">
                <form id ="categoryForm" action="test1.php" method="post">
                    <div id="categorydiv">
                        <select name="thing" onChange="getSub(this.value)">
                            <option value=0>Select Main Category<?=$options?>
                        </select> </div>

                    <div id="subcategorydiv">
                        <select name="subCats" >
                             <option>Select Sub Category</option>
                        </select></div>

                        <input type="submit" value="Submit" />
                </form>

            </div>

                <div class="content">
                    Here is the CONTENT 
                    <div class="profileInfo">
                        PROFILE INFO
                    </div>
                </div>

        </div>

        </div>
    </body>

</html>

CSS：

body{
    background: gainsboro;
    text-align: center;

}

.container{
    padding-top: 20px;
    background: gold;
    width: 900px;
    height: 1300px;
    margin: 0 auto;

}

.content {
    background: #aad500;
    width: 800px;
    height: 1000px;
    margin: 0 auto;
    border: black solid medium;
    text-align: left;
}

#header {

    width: 800px;
    height: 150px;
    margin: 0 auto;
    background: #aad500;
    border: black solid medium;
    text-align: left;

}

#header img{
    position: relative;
    left: 50px;
    top: 25px;


}

.login {
    width: 350px;
    height: 35px;
    float: right;
    background: #aad500;

}

.search{
    background: #aad500;
    color: white;
    width: 250px;
    height: 20px;
    position: relative;
    margin-top: 10px;
    margin-left: 500px;
}

.profileInfo{
    background: whitesmoke;
    width: 750px;
    height: 800px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;


}

.login a{
    float: right;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 5px;
    font-size: large;
    color: whitesmoke;
    text-align: right;

}

.login a:hover{
    color: green;
}

.navigation {
    background: green;
    width: 800px;
    height: 50px;
    margin: 0 auto;
    border: black solid medium;
    text-align: left;
}

.navigation select{
    float: left;
    margin-top: 15px;
    margin-left: 10px;
}

.navigation input {
    margin-left: 10px;
    margin-top: 15px;
}

.search #Submit{
    float: right;
    position: absolute;
}

#wrapper{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

以下是我为可能遇到同样问题而忘记添加内容的人做错了！DOCTYPE用户建议这样做，帖子因某种原因被删除了。

我在开始DOC时停止了：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

IE 8忽略div中的边距

1 个答案: