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

Question

我无法让提交按钮与我在 Internet Explorer 中的输入保持一致。在 safari 和 Firefox 中对齐效果很好，但 IE 使按钮下降了大约 5 像素。有什么想法为什么会发生这种情况或者我该如何解决它？

网址为 http://www.menslifestyles.com 单击页面顶部的“订阅”，将弹出表格。 两个输入笔直排列，但在 ie 中，提交按钮未对齐！

-------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

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

Answer 2

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

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

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

Answer 3

在此 css 规则中

#subscribe input[type="button"], #subscribe input[type="submit"]

更改

将position:relative

为

position:absolute 应该可以解决问题

。在 IE 8 中测试并有效。

Answer 4

提交按钮在不同的浏览器中似乎有不同的默认边距和填充值。

我认为这必须在某些 重置样式表 中这并不是唯一令人烦恼的跨浏览器“默认”值差异。网络什么时候能够标准化，这是另一个话题。

我们是这样做的：

#searchForm {
    position: relative;   // you must keep this
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}
input#searchBtn{
    padding: 0;    // you must keep this
    margin: 0;     // you must keep this
    position: absolute;    // you must keep this
    left: 203px;  // you can change this
    top: 2px;
    height: 24px;
    width: 42px;   // you can change this
    font-size: 14px;
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
}


<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
    <input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>

我注意到 IE8、Firefox 和 GChrome 之间存在非常小的差异，但其他浏览器中可能也存在差异。

这里的表单将其位置设置为“相对”，以便当我将按钮的位置设置为绝对时，按钮本身的位置相对于 searchForm。