下面是input type="text"
和div
.当input type="text"
从包含文本变为空时,它下面的div
会上下移动几个像素.This problem only happens in Safari.
Safari中的webkit
CSS属性是否导致此问题?我不明白为什么会这样.
这是我的代码、JSFIDLE和问题的视频.
在视频中,请注意,上下移动几个像素的黑框是带(class="autocompleteContainerSearch")的div,它位于带(class="searchBox")的文本框下方.
Black box moves up and down a few pixels when input text box changes
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>