Question

我在网格内有一个搜索框，但是由于某种原因，当用户开始输入时，输入框几乎跳到页面的另一侧。我将其范围缩小，发现position: absolute引起了这种情况。这仅在Chrome中发生。代码有什么问题？

CSS：

header {
    display: grid;
    grid-template-columns: 15% 50% 30% 5%;
    height: 40px;
    width: auto;
    /*border: 1px solid red;*/
    margin-left: 26.5%;
    margin-right: 50px;
    margin-top: 35px;
    position: relative;
}

header input {
    grid-column-start: 3;
    margin-top: 2px;
    margin-bottom: 2px;
}

.searchStyle {
    border: none;
    background-color: transparent;
    width: 75px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    position: absolute;
    right: 60px;
    top: 21%;
}

.searchStyle:focus {
    width: 200px;
    border-bottom: 1px solid #BA9765;
    outline: none;
}

HTML：

<header>
    [other code]

    <input class="searchStyle" type="text" placeholder="SEARCH…" id="search-bar" />
    [other code]
</header>

Here's the issue in Chrome.

Here's what it should look like (Firefox).

Answer 1

无法找到为什么位置：绝对值在Chrome中导致此问题，但设法通过删除绝对位置来找到解决方案，将输入内容放入div并使用以下值为该div创建一个类：

.gridAlign {
    grid-column-start: 3;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
    margin-top: 7px;
    margin-bottom: 7px;
}

CSS：位置：绝对；使输入元素在Chrome中的输入上移动

1 个答案: