製作一個按鈕和文本框相同的高度彼此

我試圖重寫兩個表單元素的默認表單樣式，以便文本框和按鈕都是相同的高度，並肩並排，使它看起來就像他們是一個元素一樣。製作一個按鈕和文本框相同的高度彼此

在某些瀏覽器中，它看起來很好，但在某些瀏覽器中它們是垂直像素或兩個像素。這是一個jsfiddle演示。 Opera X操作系統上的Opera和Firefox給我帶來了問題。

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} 
input[type="text"] { 
    background-color: #fafafa; 
    padding: 7px; 
    font-family: helvetica, arial, sans-serif; 
    font-size: 1.2em; 
    margin-bottom: 20px; 
    display: block; 
    border: solid 2px #bbb; 
    color: #6f6f6f; 
} 
input[type="submit"] { 
    background-color: #fafafa; 
    font-family: helvetica, arial, sans-serif; 
    font-size: 1.0em; 
    font-weight:bold; 
    padding: 7px; 
    color: #6f6f6f; 
} 
input[type="submit"]:hover { 
    background-color: #ff379f; 
    color: #fafafa; 
} 
#subscription-email-text-field { 
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px; 
    height:32px; 
    margin:0; 
} 
#subscribe-button { 
    display:inline-block; 
    border-width:0px 0px 0px 1px; 
    margin:0; 
    height:32px; 
} 

<div style="background-color:black; padding:20px;"> 
    <form> 
     <input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!-- 
    --><input type="submit" id="subscribe-button" value="subscribe"> 
    </form> 
</div>

來源

2013-10-05 Dex

一種簡單的解決方法是修改以下CSS規則：

#subscription-email-text-field { 
    vertical-align: top; 
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px; 
    height:32px; 
    margin:0; 
}

添加vertical-align: top負責將基線對齊的。

見演示在：http://jsfiddle.net/audetwebdesign/EmAnr/

腳註：

要添加左邊框的按鈕元素，記得要加邊框的造型，這是可以做到如下：

#subscribe-button { 
    display:inline-block; 
    border: 1px solid black; 
    border-width:0px 0px 0px 1px; 
    margin:0; 
    height:32px; 
}

來源

2013-10-06 00:09:48

不錯！不知道它爲什麼有效，但似乎。另一個問題是，我正在使用的分隔線（通過按鈕上的左側邊框）未顯示在Firefox上。任何想法爲什麼？ – Dex

關於邊界，簡單的監督，只需添加邊框樣式，這可以通過幾種方法完成。請參閱更新的小提琴。 –

謝謝，它的作品完美 – Juan

所有我所做的是增加了提交框的高度：

height: 46px;

http://jsfiddle.net/QS3ec/9/

這是非常艱難的。我已經在Mountain Lion的Safari，Firefox，Opera和Chrome上進行了測試，因此這可能不是正確的解決方案。

我認爲問題在於輸入是由瀏覽器使用非CSS機制呈現的替換元素，因此樣式可能不像您所期望的那樣適用。過去我也有過類似的問題，可以對這類事情有所瞭解。似乎總是試圖風格的老用戶界面組件，按鈕，輸入時，等

Display Table Cell inconsistency.

來源

2013-10-05 23:10:07 Jeffpowrs

我在我的編輯中添加了框大小屬性，這使得它更好，但仍然是一個像素。即使改變高度，它也不起作用。也許我應該只使用錨標籤作爲按鈕。 – Dex

嘗試使用而不是一個錨標記，因此它仍然可以在沒有js的情況下運行。 – Jeffpowrs

問題是你給了文本框填充是奇怪的行爲。在某些瀏覽器填充只對輸入類型=按鈕或提交有水平影響。

//固定

添加 '框上漿：內容盒' 的規則對輸入[類型= '提交'] {}閉合。

這會在某些瀏覽器上執行，因爲只有少數人使用它。

由於提交按鈕的解決方法設置高度

 "height of text-box + (2 * padding given to text-box')

序佔丟失了垂直填充。這是實現您的目標（跨瀏覽器）的最佳方式。

例如：您的文本框的高度= 32px。所以高度按鈕的= 32 + 2 * 7 = 46px

來源

2013-10-05 23:14:54

這不適合我。也請看我的編輯 – Dex

其實它在webkit（chrome和safari），firefox和ie10上爲我工作。 –

我的意思是你的小提琴爲我工作。 –

製作一個按鈕和文本框相同的高度彼此

回答

相關問題