3

次のように指定された入力フィールドに続く検索ボタンがあります。

<div class="sidebarsection">
    <input id="queryfield" placeholder="Search previews..."> 
    <button class="search-button" onclick="runSearch()"><img  src="images/search.png" /></button>
</div>

関連するCSSは

#queryfield {
    width: 130px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}

.search-button {
    width: 26px;
    padding: 0px;
    vertical-align: top;
}

.search-button img {
    height: 16px;
    width: 16px;
}

FireFox では、これは次のように正しく表示されます。

ファイアフォックス

IE では、これは間違っているように見えます: 画像は上部近くにオフセットされています:

IE

iPad の Safari では、これも間違っています。

サファリ

Chrome では、これも正しくありません。

ここに画像の説明を入力

上記の例で FireFox が行っているように、すべてのブラウザに画像を表示させる方法はありますか?

4

2 に答える 2

2

このように削除して、このようにあなたの中に適用するために使用されimg tagますbackground imagebutton 

<button class="search-button" onclick="runSearch()"></button>

CSS

.search-button{
background:url('../images/search.png') no-repeat center cetner;
width: 26px;
height:26px;
}
于 2013-04-22T04:31:33.820 に答える
2

ルールvertical-alignは非常にバグが多く、複数のブラウザーで外観を完全に制御したい場合は、おそらく回避する必要があります: http://reference.sitepoint.com/css/vertical-align

ポジショニングを使用して必要なものを取得したり、内側の画像のサイズを変更して、ボタンの正確な高さと幅にしたりしないでください。

于 2013-04-22T04:31:43.513 に答える