2014-07-06 3 views
3

Я пытаюсь интегрировать Google CSE на странице с BS3. Похоже, что BS3 испортил окно поиска и кнопку.Google Custom Search Engine и Bootstrap3 Проблема стиля

http://jsfiddle.net/DTcHh/509/

Вот как выглядит код в IE и Chrome http://i.imgur.com/vungb7v.png

значок поиска отсутствует в кнопке и нижняя полоса отсутствует в Chrome.

Я пытался играть с

input.gsc-search-button 
.reset-box-sizing * 

, но так как у меня есть только базовые навыки CSS я не могу понять, как это исправить. Может кто-нибудь, пожалуйста, скажите мне, как мне исправить это, чтобы окно и кнопка выглядели отлично в браузерах IE и Non IE.

+0

Если я удаляю шрифт на 'input.gsc-input', он работает. Попробуй. – Siyah

+0

Я не понял, не могли бы вы показать его в скрипке? – Sumedh

+1

См. Раздел под размер окна http://getbootstrap.com/getting-started/#third-parties – cvrebert

ответ

4

Все, что вам нужно сделать, это заменить значения CSS, которые создают проблемы, и узнать, что вы должны заменить, и каковы значения, которые вы должны изменить, чтобы воспользоваться преимуществами функции «Insoect Element» в Google Chrome.

Вы можете увидеть эффект на моем собственном сервере на:

http://link-sa.ga/gcse/


Скачать исходный код:

https://www.dropbox.com/s/bo01xp2agvp7w4e/index.html


JSfiddle:

http://jsfiddle.net/rsm23/GPLyM/

Читать комментарии под GCSE вызова для кода КСС должно быть так:

<gcse:search></gcse:search> 

<style type="text/css"> 

body { 
    margin: 10px; 
} 

#gsc-iw-id1{ 
    height: 30px; 
    border-color: #898989; 
} 

input.gsc-search-button-v2{ 
    width: 71px; 
    height: 29px; 
} 

</style> 

Я надеюсь, что я помог тебе;)

+1

Спасибо Saif. Отлично выглядит в IE и других браузерах. – Sumedh

Смежные вопросы