html - 我在浏览器之间发生了一些奇怪的大小和间距问题

标签 html css

这让我很烦恼,因为它似乎应该如此简单。我将附上 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.

最佳答案

假设您的问题是:如何正确对齐元素(因为实际上,您的帖子中没有“问题”):

去掉 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/

相关文章:

javascript - 带有 img 的包装器如何占据所有屏幕?

javascript - 如何为多个按钮运行模态和算术运算符

javascript - 设置 HTML 元素的垂直位置

css - 伪元素过渡

javascript - 使用 CSS 将 pre 元素另存为 PDF

html - Ruby 2.0 CSV 阅读器以不同方式处理 Microsoft Excel 生成的 CSV 文件并且不剥离控制字符

html - Facebook 登录按钮样式

css - 在新机器上克隆元素后,twitter bootstrap rails CSS 未加载

css - Chrome : element above css transitioning element disappears until transition finishes

css - 在没有modernizr的情况下使用CSS3 calc进行背景定位