0

我正在使用浮动：左；和浮动：对；将两个 div 容器排成一行，左边一个包含输入栏，右边一个包含一个小背景图像（搜索按钮）。

它在 Opera 和 Firefox、MSIE 9.0+ 中显示良好，但是当我在 chrome 中查看它时，右侧容器的背景图像稍微偏离了位置（向下移动了几个像素）。

我将背景颜色设置为红色以突出显示问题： screenshot

index.php 输出：

<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 容器的红色背景？

编辑：http: //jsfiddle.net/YcraM/

抱歉，忘记了 JSFiddle！

4

3 回答 3

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();
});
于 2012-08-26T03:23:14.760 回答
0

我已经在 Chrome 21 和 FF 14 中对其进行了测试，似乎设置line-height:0px;解决了这个问题。

div.right {
    float: right;
    line-height:0px;
}    
div.left {
    float: left;
    line-height:0px;
}

http://jsfiddle.net/YcraM/3/

我没有在其他浏览器中测试过，如果这不是最好的解决方案，请原谅我。

于 2012-08-26T03:30:53.980 回答
0

您可以添加float:right（或离开）到#search_bar #search_button，也可以解决问题

于 2012-08-26T03:42:02.457 回答