为什么点击搜索图标什么都不做？ [关闭]答案

【问题标题】：Why does clicking search icon do nothing? [closed]为什么点击搜索图标什么都不做？ [关闭]
【发布时间】：2015-08-01 07:19:15
【问题描述】：

由于某些原因，当我在搜索框中输入值并按搜索图标时，它没有热输入。它只发生在FF中。在 chrome 中，如果你按下搜索图标，它就会起作用。

<div class="col-lg-12">
  <input id="query" name="query" type="search" class="form-control input-lg" value="">
  <button type="submit" class="submit"><i class="fa fa-search"></i></button>
</div>

样式：

button.submit {
  border: 0px;
  box-sizing: initial;
  padding: 0px;
  margin: 0px;
}
.fa-search {
  position: absolute;
  top: 8px;
  right: 22px;
}

知道如何解决这个问题吗？我的意思是当图标搜索被按下时按钮不应该是可点击的吗？

【问题讨论】：

请加一些代码让我们好好看看
@Hello Universe 在 Firefox 搜索中 button 落后于 input 框，因此您必须提供 position 到 button 标记，然后还提供 z-index。或者，如果您无法使用css 获得解决方案，请尝试在click 的submit 按钮上使用event.stopPropagation。
与此问题相关的任何内容stackoverflow.com/questions/18741019/…

标签： html css font-awesome-4

【解决方案1】：

首先不要将<i> 标记用于图标，它用于环绕与文本具有不同含义的文本，并且必须使用斜体。请改用<div>

这里的主要问题是您的 CSS 您的标记在跨浏览器中没有得到很好的处理。

您的.fa-search 图标设置为position:absolute;，但它的包装没有关于定位或高度等的定义；所以它不会包裹它的孩子，你应该给按钮position:absolute;，因为按钮是你按下的不是图标。

从你的类中移除被注释掉的样式。

.bor-header .bor-header-search .fa-search {
  /* top: 8px; */
  /* right: 22px; */
  color: #5D6161;
  font-size: 28px;
  /* position: absolute; */
}
.bor-header .bor-header-search button.submit {
  background-color: #FFF;
  border: 0px none;
  box-sizing: initial;
  padding: 0px;
  margin: 0px;
  top: 2px;
  color: #5D6161;
  font-size: 28px;
  position: absolute;
  width: 25px;
  right: 25px;
  height: 25px;
}

【讨论】：