Safari 文本输入在输入框下方渲染文本 [英] Safari text-input rendering text below input box

问题描述

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

.banner {背景:#ececec；位置:绝对；顶部:0px；左:64px；宽度:100vw；高度:60px；行高:60px；最小宽度:1100px；}.搜索栏 {显示:块；高度:32px；宽度:276px；颜色:#353a4f；背景:白色；边框半径:16px；边界:无；字体大小:16px；字体家族:League Spartan、helvetica；padding-left: 40px;填充顶部:4px；边距:0；}.search_bar:focus {大纲:无；}.search_bar_wrapper {位置:相对；顶部:14px；左:20px；边距:0 0；z-索引:10；}.search_bar_icon {位置:绝对；高度:20px；宽度:20px；填充:#353a4f；顶部:6px；左:10px；}

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

解决方案

仅通过在输入框上指定 line-height 来修复.

I've run into a problem in safari where the text in my input box is rendered below the box as you can see in the image. Ive tried this in chrome and firefox and it seems to work fine so I'm not sure what there is I can change. Sorry I couldn't figure out how to separate my code blocks for the CSS and HTML, I'm new round here.

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

解决方案

Fixed just by specifying line-height on the input box.

这篇关于Safari 文本输入在输入框下方渲染文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！