我正在使用float:left;和浮动:对;将两个div容器放在一行中,左边一个包含一个输入栏,右边一个包含一个小背景图像(搜索按钮)。
它在Opera& amp; Firefox,MSIE 9.0+但是当我在chrome中查看它时,右侧容器的背景图像略微偏离位置(向下移动几个像素)。
我将背景颜色设置为红色以突出显示问题: screenshot
index.php outtake:
<div class="header_inner_right">
<form id="search_bar" method="post" action="" onsubmit="return checkSearchQuery();">
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<input id="search_button" src="images/search_button.gif" type="submit" value="">
</div>
</form>
</div>
index_chrome.css(如果php脚本检测到chrome浏览器,则使用):
@charset "ISO-8859-1";
#search_bar {
width: 450px;
height: 37px;
background-color: red
}
#search_bar #search_field {
border: 0px;
width: 365px;
height: 37px;
padding-left: 20px;
padding-right: 20px;
background-image: url(../images/search_field.gif);
background-repeat: no-repeat;
font-weight: bold;
color: #c0c0c0;
background-color: #ffffff
}
#search_bar #search_button {
cursor: pointer;
border: 0px;
outline: none;
height: 37px;
width: 45px;
background-image: url(../images/search_button.gif);
background-repeat: no-repeat
}
如何修复它并调整放大镜背景图像的y位置,使其与左侧div的背景图像完美对齐,并完全隐藏右侧div容器的红色背景?
对不起,忘记了JSFiddle!
答案 0 :(得分:1)
这可能不是您想要听到的答案,但几乎不可能使大多数输入元素看起来与浏览器相同。我建议你从div
元素中设置提交按钮。例如:
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<div id="search_button"></div>
</div>
根据自己的喜好用css设置div的样式 - 记得使用:hover
和:active
伪类。然后,使用例如jQuery,使其功能如下:
$('#search_button').on('click', function(e) {
$(e.currentTarget).closest('form').submit();
});
答案 1 :(得分:0)
我在Chrome 21和FF 14中对其进行了测试,似乎设置line-height:0px;
解决了这个问题。
div.right {
float: right;
line-height:0px;
}
div.left {
float: left;
line-height:0px;
}
我没有在其他浏览器中测试过,所以请原谅我,如果这不是最好的解决方案。
答案 2 :(得分:0)
您可以将float:right
(或左侧)添加到#search_bar #search_button
,以解决此问题