4

Google カスタム検索を含めようとしていますが、正しく表示されません。ボタンの検索アイコンがなく、テキスト ボックスの下部が切り取られているように見えます。

新規会員なので画像は載せません。

コード

<div id="header">
  <div class="row">
    <div class="four columns">
      <h1><img src="images/QEFLogo.JPG" /></h1>
    </div>
    <div class="four offset-by-two columns">
      <div id="iso" class="hide-for-small">
        <h1>
          <img src="images/ISO9001.jpg" />
          <img src="images/ISO14001.jpg" />
        </h1>
      </div>
      <div id="gcsearch" class="hide-for-small">
        <gcse:searchbox-only></gcse:searchbox-only>
      </div>
    </div>
  </div>
</div>

話す本当のCSSはありません...

#gcsearch {
    width:300px;
    position:relative;
    left:-5px;
}

スクリプトは、Google によって生成されたコードから変更されていません。

編集これが問題であることがわかりました。Google 要素は、サーバー上の CSS ファイル default.css を使用します。これにより、幅と高さが生成されます。

そのCSSシートの126行目で定義しています...

.cse .gsc-search-button input.gsc-search-button-v2, 
input.gsc-search-button-v2 {
    height: 13px;
    margin-top: 2px;
    min-width: 13px;
    padding: 6px 27px;
    width: 13px;
}

私はJavascriptの知識がまったくないことを念頭に置いてください.なぜこれが起こっているのですか?どうすれば修正できますか?

Foundation 以外のページでコードをテストしたところ、正しくレンダリングされました。

4

3 に答える 3

4

It was an issue with Foundation framework. Added the following to the button and resolved. The classes referred to are generated by Google which is why they do not show on my code above.

input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-image: inherit;
box-sizing: content-box;
}
于 2013-01-14T11:40:19.533 に答える
1

私は今同じ問題を抱えていました。Google クラスのバージョン 2 では、次の css を追加しました

<style>
 .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
   background-image: inherit;
   box-sizing: content-box;
   -moz-box-sizing: content-box;
 }
</style>

Chrome と Firefox で動作するようになりました

于 2013-09-04T20:08:18.283 に答える
0

</div>コード内の終了タグが多すぎます。これにより HTML が無効になり、おそらく間違って表示されるのはそのためです。

于 2013-01-12T18:28:11.783 に答える