在基金會3中Google Custom Search顯示問題

我想包含一個Google自定義搜索，但它一直顯示不正確。按鈕上的搜索圖標丟失，看起來好像文本框的底部被切斷。在基金會3中Google Custom Search顯示問題

新會員，我無法發佈圖片。

代碼

<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元素在其服務器上使用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知識可言，這究竟是爲什麼以及如何解決呢？

我測試了非基礎頁面上的代碼，它呈現正確。

來源

2013-01-12 Silvermodak

現場試@ http://www.qeftest.co.uk] – Silvermodak

這是Foundation框架的一個問題。將以下內容添加到按鈕並解決。所引用的類是由Google生成的，這就是爲什麼它們不會顯示在我上面的代碼中。

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

來源

2013-01-14 11:40:19 Silvermodak

有同樣的問題，現在與谷歌類的第2版我添加了下面的CSS，請參閱下面的答案。 – Taifun

在代碼中有一個太多的</div>結束標記。這使得它無效的HTML，可能是爲什麼它顯示錯誤。

來源

2013-01-12 18:28:11 Fred

改變還是一樣。我在空白頁面上進行了測試，結果正確顯示，因此我認爲它與基礎框架有關。 – Silvermodak

你能編輯你的問題，以便代碼反映你真正擁有的嗎？目前，你有6個開放'

' tags and 7 closing '

'。如果我們無法看到您的真實代碼，我們無法幫助您。 – Fred

對不起現在。 – Silvermodak

我現在有同樣的問題。隨着谷歌班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-04 20:08:18 Taifun

在基金會3中Google Custom Search顯示問題

回答

相關問題