iOS渲染输入按钮不正确

Question

所以我做了一个搜索栏，一切正常。除了 css。

这是它在电脑上的样子:

Search bar on computer

这是它在 iOS 上的样子:(在 iPhone、iPad 和 iPod 上测试过)

Search bar on iPad

您会注意到，在 iPad 上，搜索文本的高度大于按钮。

这是我的CSS:

input.searchFormText {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  padding-left: 2.25px;
  border-top-left-radius: 4.25px;
  border-bottom-left-radius: 4.25px;
  height: 19.5px;
  border-color: gray;
  border-style: solid;
  border-right: none;
  border-width: 0.5px;
  background-color: white;
  font-size: 12.25px;
  font-family: "Open Sans";
  transition-duration: 0.225s;
}

所以我需要搜索文本输入高度更小，但仅限于 iOS。

Answer 1

出于某种原因，iOS Safari 为输入元素提供了与其他浏览器不同的默认填充。只需设置输入的 padding-top 和 padding-bottom，它在每个浏览器中都应该具有相同的高度；)