使用CSS HTML垂直对齐提交按钮

Question

我无法按照我在Internet Explorer中的输入显示提交按钮.在safari和firefox中对齐很好,但IE正在按下按钮约5px.任何想法为什么会发生这种情况或我如何解决它？

网址是http://www.menslifestyles.com 点击页面顶部的订阅表格将弹出.两个输入直线但是提交按钮不对齐!

------- ------- HTML

<div id="subscribe">
<form id="subscribeform" method="post" action="/maillists/subscribe" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>

<label for="MaillistName">Name</label><input name="data[Maillist][name]" type="text" maxlength="255" id="MaillistName">&nbsp;    &nbsp;
<label for="MaillistEmail">Email</label><input name="data[Maillist][email]" type="text" maxlength="500" id="MaillistEmail">
<input type="submit" value="Submit"><a href="#" id="closelink">X</a>
</form></div>

----- CSS -------

#subscribe{
    width:620px;
    position:absolute;
    top:25px;
    left:50%;
    margin-left:-120px;
    overflow: auto;
    z-index: 1000;
    background: #ffffff;
    color:#6e6e6e;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Helvetica, Verdana;
}
#subscribe input{
    border: 1px solid #e5e5e5;
    display: inline;
    height: 12px;
    color:#cccccc;
    width: 215px;
}  
#subscribe input[type="button"], #subscribe input[type="submit"]{
    clear:both;
    padding:3px, 0px;
    -webkit-appearance: none;
    font-family: Helvetica, Verdana;
    background-color:#cccccc;
    text-align:center;
    color: #3c3c3c;
    font-size:10px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    display: inline;
    height:15px;
    width:60px;
    position:relative;
    margin-left:5px;
}
#subscribe form{
    margin:0px;
    padding:0px;
}
#subscribe label{
    display: inline;
    font-size: 10px;
}
#subscribe a{
    text-decoration: none;
    color: #cccccc;
}
#subscribe #closelink{
    padding:0 5px;
}

Answer 1

在你的CSS中#subscribe input[type="button"], #subscribe input[type="submit"]尝试添加vertical-align: top;

Answer 2

您应该明确设置填充和边距，某些浏览器具有不同的默认值，这会使事情变得混乱。所以margin-left:5px; 变为边距：0 0 0 3px；

表单通常也不一致，您可能想尝试绝对定位提交按钮，在这种情况下给出#subscribe位置：相对，提交按钮位置：绝对；右：0px；顶部：0px；

将来，您可以绕过默认浏览器值，并通过在样式表中设置默认值来获得更一致的外观，请参阅此处以获取可以包含的重置样式表。（如果你现在包含这个，它可能会抛出一些东西）