0

IE、Chrome、および Opera の Web サイトのレンダリングに問題があります。Firefox では、ポジショニングがうまく機能します。

Firefox ビュー

他のブラウザではがらくたのように見えますが： 他のブラウザ

いくつかの配置とパディングのオプションを試しましたが、うまくいきませんでした。ドロップダウンメニューをjQueryの代替品に置き換えてグラフィカルに強化すると、問題が発生しました。元のドロップダウンはまだありますが、css オプション "display: none" があります。ヒントをいただければ幸いです。

CSSは次のとおりです。

青い大きな箱です

.searchHomeForm a, .searchHomeForm a:hover {
    color:#000000;
}

3 つの要素を囲む目に見えないボックス

div.searchHomeForm , .searchform {
    height: 37px;
    margin-left: auto;
    margin-right: auto;
}

白い検索バー

.search_bar {
    position: inherit;
    height: 25px;
    letter-spacing: 0.02em;
    line-height: 25px;
    padding: 9px 0 0px 9px;
    width: 390px;
    border: 1px solid #95B6D6;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11) inset;
    border-radius: 0.25em 0 0 0.25em;
}

jQuery ドロップダウンの置き換え

#searchformReplacement {
    background: #EBEBEB;
    padding: 0px 1px 5px 0;
    margin-bottom: 3px;
    border-top: 1px solid #95B6D6;
    border-bottom: 1px solid #95B6D6;
    width: 109px;
    position: inherit;
}

検索ボタン

.find_button {
    background: url("../images/lupevufindsearchsubmit1.png") no-repeat scroll #bBbBbB;
    -moz-border-radius: 0.25em;
    border-radius: 0 0.25em 0.25em 0;
    position: inherit;
    height: 36px;
    line-height: 36px;
    margin: 0px 0 3px -1px;
    padding: 4px 10px 4px 10px;
    width: 60px;
    border-top: 1px solid #95B6D6;
    border-right: 1px solid #95B6D6;
    border-bottom: 1px solid #95B6D6;
    border-left: none;
    box-shadow: 2px 2px 5px rgba(76, 133, 187, 0.50) inset;
    transition: all 0.2s ease-in-out 0s;
}
4

4 に答える 4

0

はい、madhushankaroxが指摘しているように、フロートをクリアすることは重要です。ただし、特にあなたの場合は、フロートを常に使用する必要はありません。さらに、フォームを流動的なレイアウトページに配置する必要がある場合は、追加のボーナスがあります。幅が広いまたは薄いほとんどの画面で、均等に比例する必要があります。

CSS

/*the blue rounded box*/
#bluebox {
padding:3% 5%;
margin:0 25%;
background:#d0dcea;
border:solid 1px #b7c2d2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.fieldset-search {
text-align:center;
}

/*The white search bar*/
.input-search {
padding:5px;
margin:0;
width:50%;
vertical-align: baseline;
border: solid 1px #b7c2d2;
background: #fff;
outline: 0;
}

/*the jQuery Dropdown replacement*/
.list-search {
padding:4px;
margin:0 0 0 -5px;
}

/*the find button*/
.submit-search {
padding:4px 10px;
margin:0 0 0 -5px;
}

HTML

<div id="bluebox">
  <div class="fieldset-search">
  <input type="text" name="search" class="input-search">
  <select name="list" class="list-search"><option></option></select> 
  <button type="search" class="submit-search">Go</button>
  </div>
</div>
于 2013-03-08T15:38:13.953 に答える
0

私はあなたに必要な位置を持っているための小さな例を作りました、私はインラインブロックの妥当性を使用しています（そして私はそれが大好きです）：

HTML

<div id="container">
    <input type="text" class="inline-block" />
    <div class="inline-block">
        Your custom select
    </div>
    <button type="submit" class="inline-block">Search</button>
</div>

CSS

.inline-block {
    display:inline-block;
    *display:inline; /*IE hack*/
    *zoom:1; /*IE hack*/
}

#container {
    background:lightBlue;
    width:300px;
    margin:0 auto;
    text-align:center;
}

働くフィドルを見てください！

于 2013-03-08T14:38:56.307 に答える
0

float: left;隣り合った3つの要素で使用できますか？

于 2013-03-08T14:28:03.777 に答える
0

から削除position: inheritしてみて.search_bar {}、それぞれ#searchformReplacement {}に .find_button {}追加してくださいdisplay:inline-block

またはそれぞれにdisplay:inlineandfloat:leftを追加します。使用する場合は、フロートをクリアする必要がある場合がありますfloat:left

于 2013-03-08T14:30:18.020 に答える