这让我很烦恼,因为它似乎应该如此简单。我将附上 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 上,我的密码输入左侧有一个空格,导致输入未对齐。
Firefox 它们看起来很完美。
IE 11 中的不同大小。
最佳答案
假设您的问题是:如何正确对齐元素(因为实际上,您的帖子中没有“问题”):
去掉 input:password 和 <br/>
之间的空格
<label for="password">Password: </label><br />
<input type="password" name="password" placeholder="password" required> <br />
<input type="submit" value="Login">
...
关于html - 我在浏览器之间发生了一些奇怪的大小和间距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20793231/