Проблема с пользовательской поисковой системой Google и стилем Bootstrap3

#css #twitter-bootstrap-3 #google-custom-search

#css #twitter-bootstrap-3 #google-пользовательский поиск

Вопрос:

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

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

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

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

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

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

1. Если я удалю размер шрифта в input.gsc-input , это сработает. Попробуйте.

2. Я не понял, не могли бы вы, пожалуйста, показать это в скрипке

3. Смотрите подраздел о размерах полей в getbootstrap.com/getting-started/#third-parties

Ответ №1:

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

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

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

Загрузите исходный код:

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

JSfiddle:

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

Прочитайте комментарии под вызовом GCSE, чтобы код css был таким :

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