CSS, который применяется только к Chrome?

Это мой сайт: http://portable-ebook-reader.net

Строка поиска вверху состоит из двух фоновых изображений. Один - для того, где вы набираете поисковую фразу, вторая - фактическая кнопка для поиска.

Моя проблема заключается в том, что в Chrome изображение кнопки поиска равно 2px слишком HIGH. Но он отлично выглядит в IE и FF. И если я изменяю CSS (margin-top: 2px), то Chrome выглядит хорошо, но IE и FF перепутаны.

Любые идеи? Я искал часы без везения.

Спасибо!

ОТВЕТЫ

Ответ 1

Сначала попробуй сначала посмотреть на ФФ. Затем заставьте его смотреть как на FF, так и на Chrome. Только после того, как вы посмотрите прямо в FF и Chrome, вы должны начать с того, как это выглядит в IE. После того, как вы достигнете этого, затем приступайте к настройке для IE, если необходимо, используя * перед правилами стиля, например: *margin-top:2px; настраивает верхнее поле для IE7 и IE6 исключительно.

Посмотрев на свой код, трудно точно сказать, что может вызвать проблему, не имея возможности протестировать различные решения в моей системе. Но вот некоторые вещи, которые вы можете попробовать изменить в файле styles.css(который находится в вашей папке "хроника" в папке "темы" ), которая может исправить проблему:

  • применяйте одно и то же значение высоты к вашим наборам правил #s и #searchsubmit
  • удалите font: 14px "century gothic", Arial, Helvetica, sans-serif; из #searchsubmit
  • после того, как вы выполните вышеописанное, если он по-прежнему не выглядит правильным как в FF, так и в Chrome, установите для первого и второго значений заполнения для вашего набора правил #s значение 0 (т.е. измените 8px на 0px), а затем добавьте объявление margin-top: как к #s, так и к #searchsubmit и укажите оба значения, например margin-top:8px;
  • Если у вас все еще есть проблемы, попробуйте скопировать эту строку: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; из набора правил #s и добавьте его в свой набор правил #searchsubmit, чтобы он отображался в обоих наборах правил.

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

Ответ 2

Чтобы использовать CSS, который будет применяться только к браузерам Webkit (Chrome и Safari):

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #searchsubmit { height: 20px; }
    #s { margin-top: 5px; } 
}

Уродливый взлом, но он может работать для тех неприятных проблем с рендерингом.

Ответ 3

Вы можете проверить, не содержит ли navigator.appVersion слово "Chrome" и устанавливает относительное позиционирование этой кнопки на пару пикселей через javascript.

if (navigator.appVersion.indexOf("Chrome/") != -1) {
 // modify button 
}

Ответ 4

Попробуйте изменить свой doctype на строгий - все, что работает в одном, должно, в основном, работать одинаково во всех трех основных браузерах. В основном.

Ответ 6

Я нашел этот трюк пару недель назад и, похоже, работает одинаково во всех браузерах.

Создайте единую графику, содержащую как панель поиска, так и кнопку поиска. Сделайте это фон вашей формы с помощью стилей CSS. Затем отрегулируйте как текст, так и кнопку отправки (вероятно, через классы или идентификаторы), чтобы иметь {border: 0; background: transparent}, а затем просто отрегулируйте высоту и ширину элементов формы, чтобы они соответствовали макету вашего фона формы. Ранее я использовал < input type = "image"... / > но никогда не мог правильно выровнять выравнивание, независимо от того, как я стилизовал или наполнил его. Этот метод работает очень хорошо после вашей первой настройки поля элементов формы, заполнения и абсолютного позиционирования, если это необходимо (вы можете оставить границы видимыми во время тестирования, чтобы вы могли правильно разместить его).

Я также считаю удобным помещать {cursor: pointer;} в мою кнопку отправки сообщения, а иногда и другие входные данные формы, чтобы дать визуальную подсказку, что это подлежащая подаче форма, и людям предлагается щелкнуть.

Ответ 7

Посмотрите http://rafael.adm.br/css_browser_selector/

маленький js файл, который добавляет классы в тег body, такие как .webkit,.chrome и т.д., которые вы можете использовать в своей таблице стилей.