0

我正在尝试放置一个搜索框并提交按钮，以便它们对齐。我使用 CSS 重置让所有浏览器从同一级别开始。无论出于何种原因，我都无法让他们在 IE、Chrome 和 Firefox 上排队。我可以让它在 1/3 上工作，但不是 3/3。使用当前代码，搜索按钮在 FF 中对齐，在 IE 中低 1px，在 Chrome 中低 3-5px。任何帮助都非常感谢，因为我无能为力。

这是代码。

HTML 片段：

<span class="search">
            <form id="searchbox" action="/search" method="get">
                <input name="query" id="search" type="text" placeholder="I'm looking for..."/>
                <input id="submit" class="mglass" type="submit" value=""/>
            </form>
    </span>

CSS 片段：

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
    }
#search{ 
    position: relative;
    bottom: 1px;
    height: 27px;
    width: 200px;
    font-size: 14px;
    font-family: 'calibri', Tahoma, Geneva, sans-serif;
    border: none;
    background-color: #eee;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;
    padding-left: 10px;
}
#searchbox{
    position: relative;
    right: 27px;
    top: 5px;   
    float: right;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="text"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.mglass{
    background: url(../images/search_glass01.png) no-repeat center;
    height: 29px;
    width: 33px;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;
    position: relative;
    right: 7px;
    bottom: 0px;
}
.mglass:hover{
    background: url(../images/search_glass02.png) no-repeat center;
}
4

1 回答 1

1

我不得不稍微修改一下你的 CSS 并简化一些选择器以了解它，但是，试试这个：

http://jsfiddle.net/R56mu/

body {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
    }

#searchbox{
    float: right;
    overflow:hidden;
}

#search{ 
    width: 200px;
    height:32px;
    float:left;
    padding: 0 0 0 10px;
    background-color: #eee;
    font-size: 14px;
    font-family: 'calibri', Tahoma, Geneva, sans-serif;
    border: none;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;    
}
#submit{
    width: 33px;
    height:34px;
    float:left;
    background: url(../images/search_glass01.png) no-repeat center;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;   
}

#submit:hover{
    background: url(../images/search_glass02.png) no-repeat center;
}

input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="text"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
于 2013-03-21T18:14:15.823 回答