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

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

Answer 2

您应该明确设置填充和边距，某些浏览器具有不同的默认值，这会使事情变得混乱。保证金左：5px;变为保证金：0 0 0 3px;

表单一般也只是不一致，你可能想尝试并绝对定位提交按钮，在这种情况下给#subscribe位置：relative，以及提交按钮位置：绝对;右：0像素;顶部：0像素;

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

Answer 3

在此css规则中

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

更改

position:relative

到

position:absolute

应该做的伎俩。在IE 8中测试并且有效。

Answer 4

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

我认为这必须在某些reset Stylesheet中，因为这不是唯一恼人的跨浏览器“默认”值差异。什么时候网络标准化这是另一个主题。

我们就是这样做的：

#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之间存在很小的差异，但其他浏览器可能存在差异。

此处的表单将其位置设置为“relative”，以便当我将按钮的位置设置为绝对时，按钮的位置相对于searchForm。

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

4 个答案: