Question

让我简单地说。在包含5个文本框的页面上，当您刷新页面时，Chrome会破坏页面的样式，以便导航栏向下移动。

但是，如果您取出其中一个文本框，则它将始终正确呈现样式：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="index.css" type="text/css" />

        <link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,600' rel='stylesheet' type='text/css'>
        <link rel="icon" type="image/png" href="images/favicon.png" />

        <title>Improper Style</title>
    </head>
    <body>
        <header>

            <img src="images/placeholder.jpg" height="50px" />

            <div id="navbar">
                <ul>
                    <li>

                        <a href="">My Profile</a>
                    </li>
                    <li>
                        <a href="">Shopping Cart</a>
                    </li>
                    <li>
                        <a href="">Logout</a>
                    </li>
                </ul>
            </div>
        </header>
        <div id="logo" >

            <a href="index.html"><h1>Generic Name</h1></a>
            <h2>This page has improper format (on refresh)</h2>
        </div>

        <div id="navbar2">
            <ul>
                <li id="newCustomer">
                    <a href="proper.html">Click for page with <br /> correct format</a>
                </li>

                <li>
                    <a href="">Shirting</a>
                </li>

                <li>
                    <a href="">Trousers</a>
                </li>
                <li>
                    <a href="">Blog</a>
                </li>

            </ul>

        </div>

        <div id="main">
            <form id="signup" method="post" >
                <div id="signCol1">
                    <ul>
                        <li>
                            <strong>Email</strong>
                        </li>
                        <li>
                            <input type="email" size="25" maxlength="100" name="email" />
                        </li>
                    </ul>
                </div>
                <div id="signCol2">
                    <ul>
                        <li>
                            <strong>Choose password</strong>
                        </li>
                        <li>
                            <input type="password" size="25" maxlength="100" name="password" />
                        </li>
                    </ul>

                </div>
                <div id="signCol3">
                    <ul>
                        <li>
                            <strong>Repeat password</strong>
                        </li>
                        <li>
                            <input type="password" size="25" maxlength="100" name="pwconfirm" />
                        </li>
                    </ul>
                </div>
                <div id="signCol4">
                    <ul>
                        <li>
                            <strong>First Name</strong>
                        </li>
                        <li>
                            <input type="text" size="25" maxlength="100" name="fname" />
                        </li>
                    </ul>
                </div>
                <div id="signCol5">
                    <ul>
                        <li>
                            <strong>Last Name</strong>
                        </li>
                        <li>
                            <input type="text" size="25" maxlength="100" name="lname" />
                        </li>
                    </ul>
                </div>

                <input type="submit" value="Next Step" />

            </form>
        </div>

    </body>
</html>

CSS：

html {
    overflow-x: hidden;
}

body {
    font-size: 16pt;
}

#main {

    margin-left: auto;
    margin-right: auto;
}

header {
    background-color: rgb(59,0,0);
    width: 100%;
}

#navbar {
    float: right;

}

#navbar ul {

}

#navbar ul li {
    list-style: none;
    display: inline-block;
    padding-right: 20px;
}

#navbar ul li a {
    text-decoration: none;
    color: blue;



}

#navbar2 {
    float: left;
    position: relative;
    top: 10%;
    left: 3%;
    font-size: 16pt;
    line-height: 300%;
    z-index: 5;
}

#navbar2 ul {
    list-style: none;
}

#navbar2 ul li a {
    text-decoration: none;
    color: rgb(100,0,0);

}


#logo {
    text-align: center;
    clear: right;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 5px;
    left: 35px;
    font-family: bigmouth-reg;
    font-size: 20pt;
}

a img {
    border: none;
}

#signup {
    position: relative;
    left: 10%;
}

#signup div {

    /*float: left;*/
    padding-left: 5%;
    padding-right: 5%;
    display: inline-block;
    text-align: center;
}

#signup div ul {
    margin-left: 0;
    padding: 0;
}

#signup div ul li {
    list-style: none;
    padding: 0;
    margin-left: 0;
}

#signCol4 {
    margin-left: 15%;
}

#newCustomer {
    line-height: 120%;
}

#mainVid {
    text-align: center;
    position: relative;
    top: 10%;
    right: 5%;
}

#products {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /*left:5%;*/

}

#products ul {
    list-style: none;
    float: left;
    height: 400px;
}

#products ul li {
    width: 200px;
    text-align: center;
    line-height: 150%;
}

#products ul li img {
    height: 300px;
    width: 190px;
}

#productHeader {
    width: 80%;
    color: rgb(59,0,0);
    text-align: center;
    font-size: 32pt;
    position: relative;
    left: 5%;
}

.listHeader {
    text-align: center;
    width: 100%;
    position: relative;
    /*right:5%;*/
    left: 3%;
}

.listHeader hr {
    width: 75%;
    clear: right;
}

Answer 1

我想我会发布https://stackoverflow.com/users/1401973/dmi3y给出的正确答案。

我只是把图像放在导航栏的div下面，这似乎已经解决了这个问题。

再次感谢dmi3y。

奇怪的Chrome问题，可能是渲染器中的问题

1 个答案: