Почему моя форма Google CSE так плохо отформатирована для разных браузеров?

Я использую Google CSE на http://afv.com, и страница результатов для Firefox и Safari неудобна. . Вот что я вижу:

Chrome (идеально выглядит):

введите здесь описание изображения

Firefox (увеличительное стекло исчезло в синей кнопке, текст выпадает из нижней части поля ввода):

введите здесь описание изображения

Safari (поле ввода слишком широкое, синяя кнопка отображается за краем страницы):

введите здесь описание изображения

Я возился с таблицей стилей, которую дает мне Google, чтобы попытаться переопределить некоторые стили и стандартизировать вывод, но я не понимаю, почему это так странно в разных браузерах. есть идеи? Я знаю, что использование CSE — это немного хитрость, и мне приходится встраивать ее в свой макет, но на этих рисунках показаны некоторые неправильные макеты (или, в случае с Safari, крайне неверные), помимо просто небольшие проблемы с форматированием.


person Eric    schedule 21.10.2013    source источник


Ответы (1)


Вероятно, это связано с тем, что некоторые из ваших собственных css влияют на кнопку поиска (например, библиотека, такая как bootstrap или сброс css). Если вы попробуете кнопку поиска без каких-либо дополнительных стилей - например. Вот этот:

enter code herehttp://jsfiddle.net/buQL3/1/show_html/

он должен отображаться правильно (у меня хорошо отображается в последних версиях Chrome OS X 10.8.5, Firefox 24 и Safari 6.0.5).

person Devnook    schedule 27.10.2013