不同浏览器的HTML和CSS对齐问题

时间：2014-08-27 17:02:35

标签： html css

我有一个带有CSS的HTML页面。该页面正在加载Chrome中的正确对齐，但如果我在IE 11或Mozilla中加载相同的页面，则显示对齐问题。我想在所有浏览器中显示与Chrome中相同的对齐方式。如果Chrome遵循任何特定分辨率，那么如何在HTML代码中设置相同的页面分辨率。

HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="CSS/styles.css" media="screen"/>
    <title>Welcome</title>
</head>

<body>
    <div id="mainDiv">
        <div id="logoDiv">
            <div id="logo">
                <img src="images/houseLogo.png" alt="House logo" />
            </div>
            <div id="headingDiv">
                <h1>My sweet home</h1>
                <h3>We will search for you</h3>
            </div>
        </div>
        <div id="menuDiv">
            <ul>
                <li><a id="homeRound" href="index.html">Home</a></li>
                <li><a id="selectedMenu" href="#">Register</a></li>
                <li><a href="postHouse.html">Post property</a></li>
                <li><a href="postRequirements.html">Post requirements</a></li>
                <li><a href="help.html">Help</a></li>
            </ul>
        </div>
        <!--<div id="validationMessages">
            <div id="validationHeading">
                <p>Correct the following:</p>
            </div>
            <div id="errors">
                <ul>
                    <li>Select country.</li>
                    <li>Select state.</li>
                    <li>Select city.</li>
                    <li>Enter area name.</li>
                </ul>
            </div>
        </div>
        <div id="validationmessageArrow">
            <div id="arrowSymbol"></div>
        </div>-->
        <form id="registerForm" action="#">
            <div id="registerTag">
                <ul>
                    <li><label id="register">Register personal details:</label></li>
                    <li>
                        <label id="firstName">First name:</label>
                        <input type="text" name="firstName"/>
                    </li>
                    <li>
                        <label id="lastName">Last name:</label>
                        <input type="text" name="lastName"/>
                    </li>
                    <li>
                        <label id="email">E-Mail:</label>
                        <input type="text" name="email"/>
                    </li>
                    <li>
                        <label id="mobileNumber">Mobile number:</label>
                        <input type="text" name="mobileNumber"/>
                    </li>
                    <li><a id="registerButton" href="#" onclick="document.forms['registerForm'].submit();">Register</a>&nbsp;<a id="clearButton" href="#" onclick="document.forms['registerForm'].reset();">Clear</a></li>
                </ul>
            </div>
        </form>
    </div>
    <div id="copyRight">
        <center><p>Copyright &copy; 2014 My sweet home All Rights Reserved</p></center>
    </div>
</body>
</html>

CSS代码：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {

    background-image:url('../images/background.jpg');
    background-attachment:fixed;

}

#mainDiv {

    margin:0px auto;
    width:1000px;
    height:auto;
    background-color:white;
    border-radius:0px 0px 10px 10px;

}

#logoDiv {

    padding-top:10px;
    padding-left:10px;
    padding-bottom:10px;

}

#logo {

    float:left;

}
#logo img {

    width:200px;

}

#headingDiv {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;

}
#headingDiv h1{

    padding-top:20px;
    padding-left:250px;
    font-weight:bold;
    font-size:30px;

}

#headingDiv h3{

    padding-top:5px;
    padding-left:289px;
    font-style:italic;
    font-size:15px;

}

#menuDiv {

    padding-top:40px;
    width:980px;
    margin:0px auto;

}

#menuDiv ul {

    height:35px;
    background-color:black;
    border-radius:5px;

}

#menuDiv li {

    display:inline;
    float:left;
    padding-top:10px;
    padding-bottom:10px;
    border-right:1px gray solid;

}

#menuDiv li a {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    color:white;
    padding:10px;

}

#menuDiv ul li a#selectedMenuHome {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    color:black;
    background-color:orange;
    padding-top:9px;
    padding-bottom:9px;
    border-radius:5px 0px 0px 5px;

}

#menuDiv ul li a#selectedMenu {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    color:black;
    background-color:orange;
    padding-top:9px;
    padding-bottom:9px;

}


#menuDiv li a:hover {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    color:black;
    background-color:orange;
    padding-top:9px;
    padding-bottom:9px;

}

#menuDiv li a#homeRound:hover {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    color:black;
    background-color:orange;
    padding-top:9px;
    padding-bottom:9px;
    border-radius:5px 0px 0px 5px;

}

#informationDiv {

    width:980px;
    margin:0px auto;
    padding-top:10px;

}

#informationDiv ul {

    padding:2px;
    background-color:silver;
    border-radius:5px;

}

#informationDiv ul li {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    display:inline;
    color:black;
    padding-right:20px;

}

#validationMessages {

    width:490px;
    margin-left:10px;
    margin-top:10px;
    padding-bottom:10px;
    background-color:#f2dede;
    border-radius:5px;

}

#validationMessages #validationHeading p {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-top:20px;
    padding-left:30px;
    color:#b94a48;
    text-decoration:underline;

}

#validationMessages #errors ul {

    padding-left:48px;
    padding-top:10px;

}

#validationMessages #errors ul li {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    color:#b94a48;
    font-size:15px;
    list-style:decimal;

}

#validationmessageArrow {

    padding-left:30px;

}

#arrowSymbol {

    width:0; 
    height:0;
    padding-left:5px;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-top:15px solid #f2dede;
    margin-top:-1px;

}


#searchDiv {

    width:980px;
    margin:0px auto;
    padding-top:10px;

}

#searchInnerDiv {

    height:auto;
    border:1px black solid;
    border-radius:5px;
    background-image:url('../images/searchBackground.jpg');
    background-size:1920px 350px;
    background-attachment:scroll;
    background-repeat:no-repeat;

}

#searchLocality ul {

    padding:5px;

}

#searchLocality ul li {

    display:inline;

}

#searchLocality ul li label {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-left:20px;

}

#searchLocality ul li input#autocomplete {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border:1px black solid;
    width:337px;

}

#searchLocality ul li label#exampleLightColor {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    color:#999999;
    padding-left:5px;

}

#searchLocality ul li label#area {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    color:black;
    padding-left:23px;

}


#searchLocality ul li input#sublocality_level_2 {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border:1px black solid;
    width:150px;

}

#localityDiv ul {

    padding:5px;

}

#localityDiv ul li {

    display:inline;
    padding-left:20px;

}

#localityDiv ul li label {

    padding-right:17px;
    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;

}

#localityDiv ul li select {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    width:150px;
    border:1px black solid;

}

#localityDiv ul li input {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    width:150px;
    border:1px black solid;

}

#propertySearch ul {

    padding:5px;

}

#propertySearch ul li {

    display:inline;
    padding-left:20px;

}

#propertySearch ul li label {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:20px;

}

#propertySearch ul li select {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    width:150px;
    border:1px black solid;

}

#propertySearch ul li input {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    width:92px;
    border:1px black solid;

}

#searchButtons {

    padding-top:10px;
    padding-left:25px;
    width:980px;

}

#advancedSearch {

    float:left;

}

#advancedSearch a {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    width:200px;
    text-decoration:underline;
    color:white;
    padding:2px;
    background-color:black;
    border-radius:5px;
    padding-left:10px;
    padding-right:10px;

}

#advancedSearch a:hover {

    background-color:orange;
    padding-bottom:2px;
    padding-top:2px;
    color:black;
    border-radius:5px;
    padding-left:10px;
    padding-right:10px;

}

#searchButton {

    padding-right:50px;
    float:none;
    padding-bottom:10px;

}

#searchButton a {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    text-decoration:underline;
    color:white;
    padding:2px;
    background-color:black;
    border-radius:5px;
    padding-left:20px;
    padding-right:20px;
    margin-left:718px;
    text-decoration:none;

}

#searchButton a:hover {

    background-color:orange;
    padding-bottom:2px;
    padding-top:2px;
    color:black;
    border-radius:5px;
    padding-left:20px;
    padding-right:20px;
    text-decoration:none;

}

#bodyTag {

    width:980px;
    margin:0px auto;
    padding-top:10px;
    padding-bottom:15px;

}

#bodyTag ul {

    height:auto;
    border:1px black solid;
    padding-left:317px;
    padding-right:317px;
    padding-top:80px;
    padding-bottom:70px;
    border-radius:5px;
    background-image:url('../images/formsBackground.jpg');
    background-size:980px 600px;
    background-attachment:scroll;
    background-repeat:no-repeat;

}

#bodyTag ul li {

    display:block;
    padding-bottom:10px;

}

#bodyTag ul li input {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border:1px black solid;
    width:250px;

}

#bodyTag ul li label#login {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:41px;
    width:10px;
    text-decoration:underline;

}

#bodyTag ul li label#email {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:41px;
    width:10px;

}

#bodyTag ul li label#password {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:20px;
    width:10px;

}

#bodyTag ul li a#loginButton {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border-radius:5px;
    background-color:black;
    color:white;
    padding:2px 25px 2px 25px;
    border:1px black solid;
    text-decoration:none;

}

#bodyTag ul li a#loginButton:hover {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    background-color:orange;
    color:black;
    border:1px orange solid;
    border-radius:5px;
    padding:2px 25px 2px 25px;
    text-decoration:none;

}

#bodyTag ul li a#clearButton {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border-radius:5px;
    background-color:black;
    color:white;
    padding:2px 25px 2px 25px;
    border:1px black solid;
    text-decoration:none;

}

#bodyTag ul li a#clearButton:hover {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    background-color:orange;
    color:black;
    border:1px orange solid;
    padding:2px 25px 2px 25px;
    border-radius:5px;
    text-decoration:none;

}

#registerTag {

    width:980px;
    margin:0px auto;
    padding-top:10px;
    padding-bottom:15px;

}

#registerTag ul {

    padding:50px 300px;
    height:auto;
    border:1px black solid;
    border-radius:5px;
    background-image:url('../images/formsBackground.jpg');
    background-size:980px 600px;
    background-attachment:scroll;
    background-repeat:no-repeat;

}

#registerTag ul li {

    display:block;
    padding-bottom:10px;

}

#registerTag ul li input {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border:1px black solid;
    width:248px;

}

#registerTag ul li select {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border:1px black solid;
    width:250px;

}

#registerTag ul li label#register {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    width:10px;
    text-decoration:underline;

}

#registerTag ul li label#firstName {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:29px;
    width:10px;

}

#registerTag ul li label#lastName {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:32px;
    width:10px;

}

#registerTag ul li label#email {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:54px;
    width:10px;

}

#registerTag ul li label#mobileNumber {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    padding-right:0px;
    width:10px;

}

#registerTag ul li a#registerButton {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border-radius:5px;
    background-color:black;
    color:white;
    padding:2px 25px 2px 25px;
    border:1px black solid;
    text-decoration:none;

}

#registerTag ul li a#registerButton:hover {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    background-color:orange;
    color:black;
    border:1px orange solid;
    padding:2px 25px 2px 25px;
    border-radius:5px;
    text-decoration:none;

}

#registerTag ul li a#clearButton {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    border-radius:5px;
    background-color:black;
    color:white;
    padding:2px 25px 2px 25px;
    border:1px black solid;
    text-decoration:none;

}

#registerTag ul li a#clearButton:hover {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    background-color:orange;
    color:black;
    border:1px orange solid;
    padding:2px 25px 2px 25px;
    border-radius:5px;
    text-decoration:none;

}

#copyRight {

    padding-top:10px;
    padding-bottom:10px;

}

#copyRight p {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    color:black;

}

#helpContentTag {

    width:980px;
    margin:0px auto;
    padding-top:10px;
    padding-bottom:15px;

}

#helpContentTag ul {

    height:auto;
    border: 1px black solid;
    padding-left:200px;
    padding-right:200px;
    padding-top:80px;
    padding-bottom:70px;
    border-radius:5px;
    background-image:url('../images/formsBackground.jpg');
    background-size:980px 900px;
    background-attachment:scroll;
    background-repeat:no-repeat;

}

#helpContentTag ul li {

    display:block;
    padding-bottom:10px;

}

#helpContentTag ul li p {

    font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:15px;
    text-align:justify;

}

1 个答案:

答案 0 :(得分：0)

以下是您发布的代码的fiddle。

你的房子标志＆＃34;图像正在Chrome中向右推菜单项，但占位符图像在IE中的高度不同，因此菜单项显示为左对齐。

如果这是您正在讨论的问题，您可以将此菜单中的第一项添加到您的css文件中：

#menuDiv li:first-child {
    margin-left: 200px;
}

如果这不是您所指的对齐问题，请更具体。

相关问题
最新问题