2

我有一个搜索框和按钮，几周前在所有浏览器（Chrome、FF、IE7/8/9、Opera）中都可以使用，但现在仅在 Chrome 中被错误地偏移了一点。

这是在 Chrome 中 在此处输入图像描述

它在 Opera、FF、IE 中 在此处输入图像描述

注意 Chrome 中的轻微偏移。这是此搜索框的 HTML，

<form id="function_search_form" method="post" class="span-24 textcenter last">
    <input type="text" name="basic_search_input" id="basic_search_input" />
    <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp;

    <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a>
    <input type="hidden" name="search_type" value="basic" />
    <div id="autocomplete_choices" class="autocomplete"></div>
</form>

这是这些元素的 CSS，

#function_search_form #basic_search_button {
    border: 1px solid #FFFFFF;
    border-radius: 0px 4px 4px 0px;
    background: #FFFFFF;
    vertical-align: middle;
    height: 25px;
    width: 27px;
    margin: 0.5em 0px;
    padding: 1px 0px;
}

#function_search_form #basic_search_input {
    border: 1px solid #FFFFFF;
    border-radius: 4px 0px 0px 4px;
    color: #050;
    font: bold 12px 'trebuchet ms', helvetica, sans-serif;
    width: 250px;
    height: 25px;
    padding-right: 5px;
    vertical-align: middle;
}

我试图将输入包装在一个 div 中，并使用绝对位置或相对位置。但是，我更改的所有内容都在其他浏览器中破坏了它，但在 Chrome 中修复了它。如果我从在 Chrome 中修复它的文本输入中取出垂直对齐，似乎也是如此。

我不确定这是否是最新版本的 Chrome 中引入的新错误，但我记得之前在 Chrome 中工作过，此后没有任何改变。

STEVE CAMPBELL 解决方案的更新

我不确定你的工作情况如何，因为如果我取出除了我的 CSS 文件和这个 HTML 之外的所有内容，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body>
    <form id="function_search_form" method="post" class="span-24 textcenter last">
        <input type="text" name="basic_search_input" id="basic_search_input" />
        <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp;
        <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a>
        <input type="hidden" name="search_type" value="basic" />
        <div id="autocomplete_choices" class="autocomplete"></div>
    </form>
</body>
</html>

如下所示，

在此处输入图像描述

我唯一能想到的是Fiddle有一些不同的重置或其他东西。

4

1 回答 1

2

这个小提琴对我来说没问题。使用相对和绝对设置样式，并调整框大小以确保跨浏览器的一致性，并删除了 em 中的边距：

#function_search_form
{
    position: relative;
}
#function_search_form #basic_search_button {
    border: 1px solid #FFFFFF;
    border-radius: 0px 4px 4px 0px;
    background: #FFFFFF;
    height: 25px;
    width: 27px;
    margin: 0;
    padding: 1px 0px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    position: absolute;
    top: 4px;
    left: 250px;
}

#function_search_form #basic_search_input {
    border: 1px solid #FFFFFF;
    border-radius: 4px 0px 0px 4px;
    color: #050;
    font: bold 12px 'trebuchet ms', helvetica, sans-serif;
    width: 250px;
    height: 25px;
    padding-right: 5px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;    
    position: absolute;
    top: 4px;    
}

#function_search_form a {
    position: absolute;
    top: 8px;    
    left: 280px;
}
于 2012-08-22T19:47:28.253 回答