iOS端搜索框渲染异常：输入框高度适配问题求助

Got it, let's tackle this iOS input height issue! I've run into similar headaches before—iOS Safari has a knack for sneaking subtle default styles into form elements even when you disable -webkit-appearance, which throws off your carefully set heights.

First, Lock Down the Box Model #

First up, add box-sizing: border-box to your input. By default, browsers use content-box, meaning padding and borders get added on top of your set height. This can cause unexpected height bloating, especially on iOS. Update your base style like so:

input.searchFormText {
  box-sizing: border-box; /* Critical for consistent height calculation */
  -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;
}

Target iOS Devices Exclusively #

Next, we'll use a CSS media query that targets iOS devices specifically. This way, we only adjust the height where it's needed, leaving your desktop styling untouched. Add this below your base input styles:

/* Adjust height only for iOS devices (iPhone, iPad, iPod) */
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  input.searchFormText {
    height: 17.5px; /* Tweak this value until it matches your button height perfectly */
    line-height: 12.25px; /* Optional: Match your font size to keep text vertically aligned with the button */
  }
}

Why This Works #

• The media query targets devices running WebKit (iOS uses Safari's WebKit engine) and covers the typical pixel ratios/screen sizes of all iOS touch devices.
• Adjusting line-height ensures the text inside the input stays aligned with your button's text, even after reducing the input height.

If you find the media query catches some Android devices by accident, you can refine it further by adding (orientation: portrait) or (orientation: landscape) to narrow it down, but the above should work for most iOS use cases.

内容的提问来源于stack exchange，提问作者TheSwedishPotato