CSS相对Positioning+Browser兼容性

Question

我正在尝试定位一个搜索框和提交按钮，以便他们排成一列。我使用了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;
}

Answer 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;
}