Safari文本输入渲染文本在输入框下方

Question

我在safari中遇到了一个问题，我在输入框中的文字会显示在框下方，如图所示。我已经在chrome和firefox中尝试了这个，它似乎工作正常，所以我不确定我能改变什么。抱歉，我无法弄清楚如何为CSS和HTML分隔我的代码块，我在这里进行了新的讨论。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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