首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

Firefox 38 文本框顯示異常:CSS line-height 導致垂直置中失效

     編輯:程式設計綜合問答

Firefox 升級至 38.0.1 後,<input> 文字靠上顯示,疑似瀏覽器預設樣式變更。

快速修復

為輸入框容器或輸入框本身設定明確 line-height 等於 height,強制垂直置中:

.nobg input {
    height: 30px;
    line-height: 30px; /* 關鍵 */
    padding: 0 5px;
    box-sizing: border-box;
}

根因

Firefox 38 修正了 line-height: normal 在替換元素上的行為,導致未顯式設定 line-height 時文字基線對齊偏移。顯式設定可跨瀏覽器一致。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved