我在它下面有一個input type="text"和一個div。當input type="text"從有文本變為空時，它的div下方會上下移動幾個像素。此問題僅發生在 Safari 中。
Safari 中的webkitCSS 屬性是否會導致此問題？我不知道為什么會這樣。
這是我的代碼、JSFiddle 和有關問題的視頻。
在視頻中，請注意上下移動幾個像素的黑框是帶有 () 的 div，它位于帶有 () 的文本框下方。
輸入文本框變化時黑框上下移動幾個像素
https://jsfiddle.net/ea2knx30/
.headerSearch {
border-top: 1px solid #252525;
border-bottom: 3px solid #252525;
background: #252525;
position: relative;
width: 100%;
z-index: 777;
}
.entireSearchContainer {
margin-left: 156.44px;
}
.entireSearchContainer .searchBar {
display: block;
float: left;
width: 662px;
margin-top: 22.82px;
height: 46.978px;
background-color: #fff;
box-sizing: border-box;
}
.entireSearchContainer .searchBar .searchBarInner {
display: inline-flex;
display: -webkit-inline-flex;
width: 100%;
height: 48px;
}
.entireSearchContainer .searchBar .searchBox {
flex: 1;
padding: 17.944px;
}
.autocompleteContainerSearch {
z-index: 1110;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
overflow-x: hidden;
flex: 1;
max-width: 662px;
height: 30px;
width: 100%;
margin-top: -1px;
position: absolute !important;
border: 1px solid #000;
display: block;
padding-bottom: 6.854px;
} <div class="headerSearch" id="headerSearch">
<div class="entireSearchContainer" id="entireSearchContainer">
<form id="searchForm" name="example" action="https://example.com/" method="GET">
<div class="searchBar autocompleteActive" id="searchBar">
<div class="searchBarInner">
<input class="searchBox" id="searchBox" type="text" name="q" placeholder="" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" required="">
</div>
<div class="autocompleteContainerSearch" id="autocompleteContainer" style="display: block;"> </div>
</div>
</form>
</div>
</div>uj5u.com熱心網友回復：
這就是我寫它的方式，問題似乎得到了解決。
.entireSearchContainer .searchBar .searchBarInner {
display: flex;
width: 100%;
height: 48px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478185.html
標籤：javascript html css