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

CSS相对定位+浏览器兼容性

1 个答案: