为什么 Safari 会在我的搜索输入和按钮元素之间添加边距？答案

【问题标题】：Why does Safari add a margin between my search input and button elements?为什么 Safari 会在我的搜索输入和按钮元素之间添加边距？
【发布时间】：2022-02-14 07:05:57
【问题描述】：

我有一个类似 Search bar 的搜索栏。

但是，当我在 Safari 中查看我的网站时，它看起来像这样：Broken search bar.

由于某种原因，我的搜索图标和搜索输入元素之间存在差距。我尝试使用 -webkit-appearance: none; 禁用 webkit 样式，但它不起作用。这是我的代码：

body {
background-color: #000000
}

header {
  display: flex;
  justify-content: right;
  margin: 1rem;
}

#search {
  font-family: 'Montserrat', sans-serif;
  border: none;
  border-radius: 5px 0 0 5px;
  padding: 13px;
  background-color: rgba(255, 255, 255, 0.5);
  flex: 0.95;
  color: #ffffff;
  font-weight: bold;
}

#search::placeholder {
  color: #ffffff;
}

#search:focus {
  outline: none;
}

.search-container {
  display: flex;
  max-width: 350px;
  min-width: 350px;
}

.search-button {
  border: none;
  cursor: pointer;
  color: var(--dark-bg);
  background-color: #ffffff;
  border-radius: 0 5px 5px 0;
  font-size: 20px;
  padding: 0 13px;
  flex: 0.05;
}

input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

input[type='search'],
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<header>
      <div class="search-container">
        <input
          type="search"
          id="search"
          name="search"
          placeholder="City Search"
          autocomplete="off"
        />
        <button type="submit" class="search-button">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </header>

【问题讨论】：

很确定这是与
功能有关的行为。我会用
切换它。如果这不起作用，那么如果你能用它制作一个代码笔，它会更容易帮助你
感谢您的回复。将
更改为
似乎没有奏效。我在这里做了一个codepen：codepen.io/Daein/pen/mdqwgxb。 @Amit
在 Firefox 和 chrome 中看起来没有间隙。尝试清除按钮元素的outline。