HTML的輸入，並選擇不同的高度

我設置高度：HTML的輸入，並選擇不同的高度

input,select{height: 20px;}

但在瀏覽器，它的高度是input : 20px和select 18px，我不知道爲什麼，因爲輸入之前，選擇被複位。如果我刪除<!DOCTYPE html>則可以，但IE不居中頁面。

來源

2012-12-01 Wizard

評論：http：//stackoverflow.com/questions/10001291/aligning-text-and-select-boxes-to-the-same-width-in-css – alditis

http://stackoverflow.com/questions/9767612/issue-with-input-select-tag-height-in-form – Vucko

@Vucko謝謝，也許你知道默認的邊框顏色？？ – Wizard

這可以通過你的元素box-sizing屬性設置爲border-box予以糾正：像moz-或webkit-

input, select{ 
    box-sizing: border-box; 
}

廠商特定的前綴可能適用。

來源

2012-12-01 17:26:30

男人，我一直在尋找這個10分鐘。我今天最糟糕的10分鐘！ – Bitterblue

我能夠將我的SELECT的高度設置爲我在IE8和9中所需的高度。技巧是將box-sizing屬性設置爲content-box。這樣做會將SELECT的內容區域設置爲高度，但請記住margin,border和padding值不會在SELECT的寬度/高度中計算，因此應相應調整這些值。

select { 
    display: block; 
    padding: 6px 4px; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing:content-box; 
    box-sizing:content-box; 
    height: 15px; 
}

這是一個工作jsFiddle。您介意確認並標記適當的答案嗎？

來源

2013-01-02 15:43:00 Joshua

HTML的輸入，並選擇不同的高度

回答

相關問題