在輸入框下方的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文本輸入呈現文本

回答

相關問題