使用CSS提交按鈕的垂直對齊HTML

我無法讓我的提交按鈕與我在Internet Explorer中的輸入一致顯示。 safari和firefox中的對齊方式很好，但IE將按鈕向下放大約5px。任何想法，爲什麼發生這種情況，或者我可以如何解決它？使用CSS提交按鈕的垂直對齊HTML

URL是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; 
}

來源

2011-05-21 Joe

您應該設置填充和明確的保證金，一些瀏覽器有不同的默認值，這會弄亂一切。所以margin-left：5px;成爲保證金：0 0 0 3px;

表格也是一般不一致的，你可能想要嘗試絕對定位提交按鈕，在這種情況下給#subscribe position：relative，並且submit按鈕position：absolute;右：0像素;頂：0像素;

未來，您可以繞過默認瀏覽器值，並通過在樣式表中設置默認值來獲得更一致的外觀，請參閱here瞭解可包含的重置樣式表。（如果您有這個現在可能拋出一些東西出來）

來源

2011-05-21 15:31:11 addedlovely

哦，並得到螢火蟲，以幫助你在飛行中修補，看看發生了什麼事。（如果你不使用它） - http://getfirebug.com/ – addedlovely 2011-05-21 15:32:09

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

來源

2011-05-21 15:32:38 Sotiris

在這個CSS規則

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

變化

position:relative

到

position:absolute

應該這樣做。在IE 8中測試並運行。

來源

2011-05-21 15:49:17

提交按鈕在不同的瀏覽器中似乎有不同的默認邊距和填充值。

我認爲這必須在一些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之間非常小的差異，但有可能在其他瀏覽器。

此處的表單將其位置設置爲「相對」，因此當我將按鈕的位置設置爲絕對時，按鈕位置本身相對於searchForm。

來源

2011-08-25 12:52:38

使用CSS提交按鈕的垂直對齊HTML

回答

相關問題