html – Google Foundation中的Google自定义搜索显示问题

概述我正在尝试添加Google自定义搜索,但它仍然显示不正确.按钮上的搜索图标丢失,看起来好像文本框的底部被切断了. 新成员,所以我无法发布图像. 码 <div id="header"> <div class="row"> <div class="four columns"> <h1><img src="images/QEFLogo.JPG" /></h1> </div 我正在尝试添加Google自定义搜索,但它仍然显示不正确.按钮上的搜索图标丢失,看起来好像文本框的底部被切断了.

新成员,所以我无法发布图像.

码

<div ID="header">  <div >    <div >      <h1><img src="images/QEFlogo.JPG" /></h1>    </div>    <div >      <div ID="iso" >        <h1>          <img src="images/ISO9001.jpg" />          <img src="images/ISO14001.jpg" />        </h1>      </div>      <div ID="gcsearch" >        <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框架的一个问题.将以下内容添加到按钮并解决.所引用的类是由Google生成的,这就是为什么它们不会显示在我上面的代码中.

input.gsc-search-button,input.gsc-search-button:hover,input.gsc-search-button:focus {background-image: inherit;Box-sizing: content-Box;}

总结

以上是内存溢出为你收集整理的html – Google Foundation中的Google自定义搜索显示问题全部内容，希望文章能够帮你解决html – Google Foundation中的Google自定义搜索显示问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。