下面是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>

推荐答案

我就是这样写的,这个问题似乎已经解决了.

.entireSearchContainer .searchBar .searchBarInner {
   display: flex;
   width: 100%;
   height: 48px;
}

Javascript相关问答推荐

XSLT处理器未运行

JS:XML insertBefore插入元素

为什么我的getAsFile()方法返回空?

如何在JAVASCRIPT中临时删除eventListener?

钛中的onClick事件需要在两次点击之间等待几秒钟

如何在JAVASCRIPT中合并两组对象并返回一些键

令牌JWT未过期

更新Redux存储中的对象数组

将嵌套数组的元素乘以其深度,输出一个和

JavaScript:如果字符串不是A或B,则

使用Perl Selify::Remote::Driver执行Java脚本时出错

JQuery使用选项填充HTMLSELECT并设置默认结果,默认结果显示为空

如何向内部有文本输入字段的HTML表添加行?

为什么我的Reaction组件不能使用createBrowserRouter呈现?

我正在为我的单选按钮在HTML中设置一个值.使用Java脚本,我如何才能获得该值?

2.0.0-dev quill拖动文本不起作用如何使其拖动文本

更改所有验证组件文本和背景 colored颜色

从Java到Java的Port Inn代码验证

Mancala雪崩版本的Minimax:我的代码返回了一个错误的移动

如何延迟Java脚本滚轮事件