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

您有两个潜在问题：

1. 文字框高度太小
   最有可能的是，您刚刚将文本框的高度设置得太小 - 您将其设置为10px但字体大小为20px。

2. line-height 可能也太小
   线高似乎不是问题，因为我没有看到任何明确设置的证据。
   

处理字体时，最好使用相对度量单位，例如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...]
}