Bootstrap FormGroup/ Input 仅在 IOS 中不完全可见（被某些层隐藏了一半）

Question

我正在处理一个带有 bootstrap 输入的表单组，它在所有桌面平台以及 Android 中都可以正常工作，但由于一些奇怪的原因，它不是完全显示或仅显示半隐藏输入字段，请查看下图。

Android（工作正常）

这是IOS中的显示方式（问题）

这是负责该输出的书面代码。

<div className="form-group search-div">
          <form className='form' ref={form} onSubmit={handleSearch}>
            <button className="search-button" >
              <div className="search-icon">
                <span >{SEARCH_ICON}</span>
              </div>
            </button>
            <input
              type="search"
              className="search-input"
              name="searcText"
              value={searchText}
              onChange={onChangeUsername}
              placeholder="Search"
              aria-label="Search"
              aria-describedby="search-addon" />
          </form>
        </div>

CSS

.search-input {
  /* position: inherit; */
  width: calc(100% - 50px);
  height: 18px;
  /* left: 45px; */
  /* top: -35px; */

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 18px;
  border: 0px;
  outline: 0px;
  background-color: #FFFFFF !important;
}

只是不知道在这里做什么，如果有人已经处理过类似的问题，有什么意见吗？

Answer 1

虽然没有提供 fiddle 进行测试，但根据以往的经验，建议删除 line-height:18px 属性。

Answer 2

您应该更改 height 属性，iOS 中的输入添加了一些填充，因此 18px 行高上的 18px 对于文本高度来说太小了。根据您希望达到的结果，尝试增加高度或减少 css 中的填充。

Bootstrap FormGroup/ Input 仅在 IOS 中不完全可见（被某些层隐藏了一半）

Bootstrap FormGroup/ Input is not fully visible (Half hidden by some layers) only in IOS

css

ios

twitter-bootstrap

react-bootstrap

bootstrap-4