0

検索ボックスと送信ボタンを並べて配置しようとしています。CSS リセットを使用して、すべてのブラウザーを同じレベルから開始しました。なんらかの理由で、IE、Chrome、Firefox でそれらを並べることができません。1/3 では動作しますが、3/3 では動作しません。現在のコードでは、検索ボタンは FF で、IE で 1 ピクセル下に、Chrome で 3 ～ 5 ピクセル下に配置されます。私は機知に富んでいるので、どんな助けも大歓迎です。

これがコードです。

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 に答える