0

検索バーのフォームに取り組んでいますが、問題にぶつかりました。私の Windows PC では、検索バーがコード化されたとおりであることがわかりますが、Mac で見ると、幅が異なります。

(どちらも Google Chrome を使用)

Windows (私がどのようになりたいか)

ここに画像の説明を入力

Mac（Windowsと同じだ​​ったらいいのに）

ここに画像の説明を入力

HTML: 

<div id="searchBox">
<div id="searchBarHold">
<input type="text" class="searchBar" size="40" /><input type="button" value="SEARCH" class="searchButton" />
</div>
</div>

CSS

#searchBox {width:368px;height:45px;background:url(../images/gradient.png) #333;border-radius:5px;float:left;}

#searchBarHold {padding:7px;}

.searchBar {padding:5px;width:border-radius:3px;border:none;}

.searchButton {height:27px;border-left:1px #f98923 solid;border-right:1px #f98923 solid;border-bottom:1px #f9b233 solid;border-top:1px #ffd797 solid;background:#f9b233;color:#fff;border-radius:3px;font-weight:900;}

4

2 に答える 2

0

さまざまなブラウザがオーバーライドしていない独自のcssを適用しているため、これらの入力に幅を指定しました。したがって、これらの幅を定義すると、要素の外観をより細かく制御できるようになります。だから、これを試してみてください、私はちょうどブラウザスタックでもie9でテストしました、そしてそれはうまく動作し、あなたが与えたいパディングで遊んでいます。

于 2013-02-11T23:09:13.400 に答える
0

固定幅を使用しているようです。ここでできることをいくつか。

1）テキスト入力とボタン入力を固定幅にして、検索ボックスの必要なスペースを占有するようにします（パディング/マージンを考慮することを忘れないでください）

2) searchBox から幅を削除して、その中の子と同じ幅になるようにします。

于 2013-02-11T23:04:07.077 に答える