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

这是 Foundation 框架的问题。将以下内容添加到按钮并解决。提到的类是由谷歌生成的，这就是为什么它们没有显示在我上面的代码中。

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 回答