在輸入標籤和按鈕中定位文本。行高有時被忽略

我無法讓我的一些按鈕或輸入在不同瀏覽器中看起來相同。文本的垂直定位通常是問題。我嘗試了多種瀏覽器，Firefox（16）在OSX中忽略了我的行高，並且在Windows中看起來不同。在輸入標籤和按鈕中定位文本。行高有時被忽略

通常有1px的差異，有時更多。當您切換到iPad或其他移動設備時，這尤其是一個問題，它總是看起來不一樣。這裏是我的CSS ...

margin   : 0px; 
    padding  : 0px; 
    font-size  : 15px; 
    //height  : 15px; // Tried this too with unsatisfying results 
    line-height : 1; 
    vertical-align : top;

我把屏幕快照，無需利用高度財產 line-height problem in browsers chrome, safari, ie10, firefox. in osx & windows 8

編輯：
所以我環顧四周，以獲取更多信息，並發現了一些問題與類似的問題。
沒有一個解決它，但...
- >1 pixel line height difference between Firefox and Chrome
- >line-height 2px lower in firefox vs webkit

EDIT2：
而且，如果我做的jsfiddle我仍然得到這個問題，這是一個有點不同，因爲它不是在相同的上下文在網站上我的工作，但它仍然是一個行高/文本問題：
在這裏看到：http://jsfiddle.net/XQ7VD/3/ 這是瀏覽器（左）和Firefox（右）在OSX

EDIT3：
下面是用行高設置爲18像素的屏幕截圖（從這個jfiddle：http://jsfiddle.net/BJ8eR） enter image description here

我剛剛看到的jsfiddle按鈕和懸停盒有同樣的問題！的xD
好的，我現在做... screenshooting

-
如果有人不知道一招，請與我們聯繫。謝謝！

來源

2012-10-12 Stoikerty

請創建一個小提琴，以便我們可以看看你的問題。 – keaukraine

在各種平臺上的所有瀏覽器中，文本呈現都不同 - 字體反鋸齒完全不同。所以很難獲得像素完美的結果。根據我的經驗，爲大型瀏覽器設計輸入/按鈕元素是PITA的一項重要功能。特別是移動Webkit在某些情況下是不可預測的。

如果您的CSS不是摘錄，您可能需要添加display:inline-block;。

來源

2012-10-12 13:28:08 keaukraine

我剛剛試過這個，但可惜它沒有解決問題。我做了一個jsfiddle，但仍然有與定位類似的問題，我更新了我的問題與jsfiddle鏈接。 – Stoikerty

@Yoschi奇怪的'行高：1'（沒有尺寸）。我已將它設置爲18px：http://jsfiddle.net/BJ8eR/ 我沒有Mac來測試它，請試試這個小提琴。我已經在Win7 FF和Chrome上試過了，'line-height：1'高度不同，而'line-height：18px'是平等的。 – keaukraine

我製作了許多瀏覽器的osx和win8中的小提琴的截圖，並將它們添加到我的問題:)雖然問題仍然存在 – Stoikerty

在輸入標籤和按鈕中定位文本。行高有時被忽略

回答

相關問題