<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
由于某些原因,当我在搜索框中输入值并按下搜索图标时,它没有热输入。它只发生在 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;
}
知道如何解决这个问题吗?我的意思是当按下图标搜索时按钮不应该是可点击的吗?
最佳答案
首先不要使用<i>
它使用的图标标签用于环绕与文本具有不同含义的文本,并且需要以斜体显示。使用 <div>
相反
这里的主要问题是您的 CSS 标记未在跨浏览器中得到很好的处理。
你有你的 .fa-search
图标设置为 position:absolute;
但它的包装器没有关于定位或高度等的定义;所以它不会包裹它的 child 你应该给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;
}
关于html - 为什么点击搜索图标没有任何反应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30342970/