手機和臺式機上不同的行高和基線

我不知道什麼是錯的。下面是如何看起來兩張圖片所示：

在桌面上：

在移動設備上：

正如你可以在移動設備上看到的文字是不是垂直對齊中心。

此問題僅在移動設備上可見。

什麼問題？我錯過了什麼？這個問題在輸入中也是可見的。

我使用下面的代碼的按鈕：

.button 
    font-family: 'Gotham Pro', sans-serif 
    font-size: 14px 
    color: $color-text--button 
    padding: 10px 15px 
    text-transform: uppercase 
    background: $color-button--default 
    border: 1px solid $color-transparent

請注意，我用的填充設置

我剛纔在測試按鈕

更新的高度手機安卓版火狐瀏覽器，一切正常，只用Chrome

來源

2016-11-28 gzbuaapzroyn

我剛剛嘗試過您的CSS，並且在移動設備上沒有問題。請發佈重現問題的代碼片段，否則我們無法使用。 – LGSon

嘗試將「行高」重置爲1到1.2之間的某個位置。當沒有設置/重置瀏覽器的默認設置可能會有所不同，所以Chrome可能會給它其他東西，默認情況下 – LGSon

代碼中沒有指定行高。

嘗試設置特定的線條高度。此外，我建議，你通過行高而不是通過填充來居中文本。設置與按鈕具有相同高度的線條高度。

CSS

.button { 
    height: 40px; 
    line-height: 40px; 
}

這僅適用於單行文字作品，當然。也看看this SO question

來源

2016-11-28 15:40:44 chillwalker

但爲什麼這在桌面上工作，我不想設置按鈕的靜態高度，使用填充更靈活 – gzbuaapzroyn

With給出的信息很難猜測。也許在chrome中有一個用戶代理風格導致了這個問題。你有沒有嘗試設置一個固定的行高？ – chillwalker

使用靜態高度線height屬性它的工作原理，但我不能做到這一點，我有按鈕動態高度根據填充 – gzbuaapzroyn

您是否指定了針對移動設備的媒體查詢？您可能需要添加

// you can use any other value of screen width mobiles use like 640, 768 
@media (max-width:480px){ 
    line-height: 15px; // The line height you want to show on mobile 
}

來源

2016-11-28 15:41:38 Ojanti

並非所有瀏覽器都有默認設置。幾乎總是我養成在身體元素上設置樣式的習慣

body{ 
font-size: 100%; 
line-height: 1.333%; 
}

照顧這樣的事情。

來源

2016-11-28 22:33:34 jjeining

手機和臺式機上不同的行高和基線

回答

相關問題