萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

Firefox 下 input 按鈕文字垂直居中失效的根因與 CSS 修復方案

Firefox 為 input[type="button"] 等元素注入私有屬性 ::-moz-focus-inner,預設 padding: 0 2px 導致:

  1. 按鈕左右天生 2px 內邊距
  2. 文字垂直居中失效(設定 padding-bottom 無效)
  3. 其他怪異表現

一鍵修復 CSS

input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
    padding: 0;
}

將此段加入 Reset/Normalize 樣式表,徹底清除 Firefox 私有樣式干擾,按鈕文字垂直居中即刻恢復正常。兼容性無副作用,建議專案標準化引入。

copyright © 萬盛學電腦網 all rights reserved