在输入框下方的Safari文本输入呈现文本

我已经遇到了safari中的问题，其中我的输入框中的文本呈现在框下方，如图中所示。我已经在Chrome和Firefox中试过了，它似乎工作正常，所以我不知道我能改变什么。对不起，我无法弄清楚如何分离CSS和HTML的代码块，我在这里是新的一轮。在输入框下方的Safari文本输入呈现文本

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

来源

2016-09-18 Kyle Byrne

你可以指定Safari的版本吗？我在Safari上尝试了这一点，甚至在iPad上使用移动Safari，看起来很好。谢谢！ – sean

我在9.1.3版本中 –

CodePen，Safari Version 9.1.3看起来很好：http://codepen.io/obliviga/pen/zKKYxW?editors=1100 –

只是通过对输入框指定行高固定。

来源

2016-09-18 14:02:23

在输入框下方的Safari文本输入呈现文本

回答

相关问题