爲什麼浮動輸入元素會改變其高度？

基本上我想要一個跨度和一個輸入元素佔用相同數量的垂直空間，以便正確對齊兩個框中的文本。當不漂浮元素時，我可以很容易地實現這一點。但只要我添加一個浮動屬性，一些額外的像素被添加到輸入元素的高度。我不能爲了我的生活理解這是爲什麼。爲什麼浮動輸入元素會改變其高度？

我該如何解決？

此問題存在於iOS 6上的Safari和桌面上的Chrome上。也發生在Firefox中，但效果有所不同。

我創建了this fiddle，顯示我的問題。

<input class='float' value="some text" id='input2'/> 
<span class='float' id='text2'>some text</span><br /> 

input, span { 
    font-family: Helvetica; 
    font-weight: bold; 
    font-size: 15px; 
    line-height: 15px; 
    padding: 0px; 
    border: 0px; 
} 

input { 
    text-align: right; 
} 

.float { 
    float: right; 
}

來源

2013-04-09 oligofren

是不是浮動跨度實際上去除它的高度？一切都是17，但浮動範圍是15. – dewyze 2013-04-09 15:52:57

真的！觀察得很好！改變了標題。 – oligofren 2013-04-10 07:28:38

兩件事。看起來浮動輸入是給它一個2px的邊際，你可以很容易地刪除。如果你這樣做，並刪除行高屬性，一切似乎都排在這兩個計數。

http://jsfiddle.net/cYaa2/4/

input, span { 
    font-family: Helvetica; 
    font-weight: bold; 
    font-size: 15px; 
    padding: 0px; 
    border: 0px; 
} 

input { 
    text-align: right; 
} 

.float { 
    float: right; 
} 

input.float { 
    margin:0px; 
}

來源

2013-04-09 15:56:55 dewyze

嗯...我給你答案，因爲你實際上回答了我問的問題。太糟糕了，我問的不是我想要的答案：p原始問題在iPhone上顯示，我試圖通過上面的代碼片段複製它。但是，唉，兩人不一樣，事實證明。下次我會嘗試更加努力創建一個類似的代碼片段，它不僅僅是看似地複製問題。 – oligofren 2013-04-14 08:48:01

哈哈，對不起！如果你問一個新的問題，我會盡我所能來回答它，但我不熟悉iPhone的東西。 – dewyze 2013-04-17 01:30:06

爲什麼浮動輸入元素會改變其高度？

回答

相關問題