chrome和Firefox之間的CSS文本字段差異

Question

具有以下CSS樣式

    .form-signin input[type="text"],
    .form-signin input[type="password"] {
        font-size: 20px;
        text-align: center;
        height: auto;
        margin-bottom: 20px;
        padding: 20px 9px 20px;
    }

我在Firefox上看到的與Chrome不同。 似乎在文本字段中的底部填充設置不同。 看g在Firefox上沒有正確顯示。 我該如何解決？

Answer 1

這是行高問題。

嘗試：

.form-signin input[type="text"],
.form-signin input[type="password"] {
    font-size: 20px;
    text-align: center;
    height: auto;
    margin-bottom: 20px;
    padding: 20px 9px 20px;
    line-height: 24px;
}

24px或更多或更少

Answer 2

您有2個潛在問題：

1. 文字框高度過小
   最有可能的是，您剛剛將文本框的高度設置得太小-您將其設置為10px，但字體大小為20px。

2. 行高也可能是太小
   行高在這里似乎不是問題，因為我看不到任何明確設置的證據。
   

處理字體時，最好使用相對度量單位，例如em或rem。 它們是可縮放的，因為它們是相對於字體大小計算得出的，因此它將設置行高以適合例如

.form-signin input[type="text"],
.form-signin input[type="password"] {
    font-size: 20px;
    height: 1.25em;
    line-height: 1.25em;
    [rest of your css here...]
}