css - 输入元素上的字体大小属性不是 MacOS 中的 Chrome 和 Safari

Question

有一个具有特定font-size 属性的输入字段。

form input[type=search] {
  width: 60%;
  font-size: 1.1em;
  padding: .35em .4em;
}

默认情况下，由于字体大小属性，输入字段的高度也会发生变化。 Linux 和 Windows 中的所有浏览器都支持 font-size 属性。 Firefox 在 MacOS 中也是如此。

但是 MacOS 中的 Safari 和 Chrome/Opera 没有。输入字段大小和字体大小在 Safari 中不会改变。 Chrome/Opera 仅当输入字段处于焦点上时才增加字体大小。

预期的显示是无论字段是否处于焦点上，字体大小都会得到尊重。只有 MacOS 中的 Firefox 才能正确显示它。

Answer 1

你想用 rem 指定你的字体大小而不是 em https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem

指定线宽(以 em 为单位)并将其与高度匹配总是一个好主意，如果没有冲突的 css 这与大多数字体系列将意味着您的文本将水平居中并且输入字段应该很漂亮跨浏览器大致相同。

form input[type=search] {
   width: 60%;
   /* font-size: 1.1em; -- not em */
   font-size: 1.1rem; /* -- yes rem */
   padding: .35em .4em;
   line-height: 1.8em; /* -- add this -  whatever height you want in em */
   height: 1.8em; /* -- add this -  whatever height you want in em */
   box-sizing: border-box; /* -- you will probably want to add this because you are using padding */
}

盒子尺寸链接:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing