html - Safari text-input 渲染输入框下方的文字

Question

我在 safari 中遇到了一个问题，我的输入框中的文本呈现在框下方，如图所示。我在 chrome 和 firefox 中试过这个，它似乎工作正常，所以我不确定我可以改变什么。抱歉，我不知道如何分离 CSS 和 HTML 的代码块，我是新来的。

.banner {
  background: #ececec;
  position: absolute;
  top: 0px;
  left: 64px;
  width: 100vw;
  height: 60px;
  line-height: 60px;
  min-width: 1100px;
}
.search_bar {
  display: block;
  height: 32px;
  width: 276px;
  color: #353a4f;
  background: white;
  border-radius: 16px;
  border: none;
  font-size: 16px;
  font-family: League Spartan, helvetica;
  padding-left: 40px;
  padding-top: 4px;
  margin: 0;
}
.search_bar:focus {
  outline: none;
}
.search_bar_wrapper {
  position: relative;
  top: 14px;
  left: 20px;
  margin: 0 0;
  z-index: 10;
}
.search_bar_icon {
  position: absolute;
  height: 20px;
  width: 20px;
  fill: #353a4f;
  top: 6px;
  left: 10px;
}

<div class="banner">
  <div class="search_bar_wrapper">
    <input type="text" class="search_bar" placeholder="Search..." />
    <img src="imgs/Icons/search.svg" class="search_bar_icon" />
  </div>
</div>

Answer 1

仅通过在输入框上指定行高来修复。