html - 搜索图标移出 div，在 chrome 中工作正常但在 mozilla 中不工作

Question

我有一个简单的搜索栏，其中包含一个 div 并且在该 div 中有 -文本和搜索按钮的输入元素。

       <div className="search-box">
          <input
            type="text"
            placeholder={PLACEHOLDER.search}
            value={this.state.search}
            onChange={this.updateSearchBar}
            onKeyUp={this.keyPress}
          />
          <IconButton className="search-icon-button" onClick={this.handleSearchIcon}>
            <SearchIcon />
          </IconButton>
        </div>

CSS 文件 -

.search-box {
border: 1px solid black;
width: 200px;
height: 30px;
display: flex;
min-width: 180px;
margin-right: 2%;
padding-left: 1px;}

.search-box input{
    width: 100%;
    color: black;
    border: none;
    outline: none;
}
.search-icon-button {
    color: #FF7D50 !important;
    padding: 3px 0px 0px 7px !important;
}

IconButton 和 SearchIcon 是 Material ui 组件。

下面附上 chrome 和 mozilla 的屏幕截图。

Chrome -

Mozilla -

你能帮忙吗我已经使用了 width: webkit-mozilla 但我希望它在两者上都能正常工作。

Answer 1

给浏览器特定的css。你可以根据设置的搜索图标给padding。希望对你有帮助。

@-moz-document url-prefix(){
   .search-icon-button {
    color: #FF7D50 !important;
    padding: 3px 0px 0px 4px !important;
  }
}