Question

这让我烦恼，因为它似乎应该如此简单。我要附上Chrome，FF和IE 11的图像。

首先，它只是一个简单的登录，页面上的电子邮件和密码输入垂直和水平居中。

HTML / JAVASCRIPT代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Builds Login</title>
<script type="text/javascript">
function validateForm()
{
    var x=document.forms["login"]["username"].value;
    if (x==null || x=="")
        {
            alert("Please fill out the username");
            return false;
        }
}   

</script>
</head>
<body>
    <section class="loginform tmr">
    <form name="login" action="index_submit" method="get" accept-charset="utf-8">
        <label for="usermail">Email: </label><br />
            <input type="email" name="usermail" placeholder="yourname@email.com" required><br />
        <label for="password">Password: </label><br />
            <input type="password" name="password" placeholder="password" required> <br />
            <input type="submit" value="Login">
    </form>
    </section>
</body>
</html>

CSS代码（<head>内）：

<style type="text/css">

html, body {
    height:100%;
    width:100%;
    margin:0px;
    background: url('images/blue_sky.jpg');  
    font-size: 12pt;
}
body {
    display:table;
    vertical-align:middle;
    text-align:center;
}
section  {
    display:table-cell;
    vertical-align:middle;
}


label {
    color: #FFFFFF;
}

.tmr:before,
.tmr:after {
    content: "";
    display: table;
}

.tmr:after {
    clear: both;
}

.tmr {
    *zoom: 1;
}
:focus {
    outline: 0;
}

.loginform input:not([type=submit]) {
    padding: 5px;
    margin-right: 10px;
    border: 1px solid rgba(0, 0, 0, 0,3);
    border-radius: 3px
    box-shadow: inset 0px 1px 3px 0pxrgba(0, 0, 0, 0.1),
                0px 1px 0px 0px rgba(250, 250, 250, 0.5);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.loginform input[type=submit] {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: #64c8ef; /*Old browsers */
    background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottombottom, color-
stop(0%, #64c8ef), color-stop(100%, #00a2e2)); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* Chrome, Safari5.1+ */
    background: -o-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* IE10+ */
    background: linear-gradient(to bottombottom, #64c8ef 0%, #00a2e2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2', GradientType=0 ); /* IE6-9 */
    color: #fff;
    padding: 5px 15px;
    margin-right: 0;
    margin-top: 15px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

</style>

在Chrome上，我的密码输入是左侧一个空格，导致输入未对齐。

Chrome

Firefox看起来很完美。

Firefox

IE 11中的大小不同。

In IE 11 they are different sizes.

Answer 1

假设您的问题是：如何正确对齐元素（因为实际上，帖子中没有“问题”）：

删除input：password和<br/>

之间的空格

<label for="password">Password: </label><br />
    <input type="password" name="password" placeholder="password" required> <br />
    <input type="submit" value="Login">
    ...

我在浏览器之间有一些奇怪的大小和间距问题

1 个答案: