Это мой сайт: http://portable-ebook-reader.net
Строка поиска вверху состоит из двух фоновых изображений. Один - для того, где вы набираете поисковую фразу, вторая - фактическая кнопка для поиска.
Моя проблема заключается в том, что в Chrome изображение кнопки поиска равно 2px слишком HIGH. Но он отлично выглядит в IE и FF. И если я изменяю CSS (margin-top: 2px), то Chrome выглядит хорошо, но IE и FF перепутаны.
Любые идеи? Я искал часы без везения.
Спасибо!
Сначала попробуй сначала посмотреть на ФФ. Затем заставьте его смотреть как на FF, так и на Chrome. Только после того, как вы посмотрите прямо в FF и Chrome, вы должны начать с того, как это выглядит в IE. После того, как вы достигнете этого, затем приступайте к настройке для IE, если необходимо, используя * перед правилами стиля, например: *margin-top:2px; настраивает верхнее поле для IE7 и IE6 исключительно.
Посмотрев на свой код, трудно точно сказать, что может вызвать проблему, не имея возможности протестировать различные решения в моей системе. Но вот некоторые вещи, которые вы можете попробовать изменить в файле styles.css(который находится в вашей папке "хроника" в папке "темы" ), которая может исправить проблему:
#s и #searchsubmitfont: 14px "century gothic", Arial, Helvetica, sans-serif; из #searchsubmit#s значение 0 (т.е. измените 8px на 0px), а затем добавьте объявление margin-top: как к #s, так и к #searchsubmit и укажите оба значения, например margin-top:8px;font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; из набора правил #s и добавьте его в свой набор правил #searchsubmit, чтобы он отображался в обоих наборах правил.Там так много разных возможностей, которые могут вызвать проблему, поэтому вы можете попробовать один из вышеупомянутых хаков, если не можете понять источник проблемы.
Чтобы использовать CSS, который будет применяться только к браузерам Webkit (Chrome и Safari):
@media screen and (-webkit-min-device-pixel-ratio:0) {
#searchsubmit { height: 20px; }
#s { margin-top: 5px; }
}
Уродливый взлом, но он может работать для тех неприятных проблем с рендерингом.
Вы можете проверить, не содержит ли navigator.appVersion слово "Chrome" и устанавливает относительное позиционирование этой кнопки на пару пикселей через javascript.
if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button
}
Попробуйте изменить свой doctype на строгий - все, что работает в одном, должно, в основном, работать одинаково во всех трех основных браузерах. В основном.
Как ссылка, список всех возможных браузеров CSS для браузера. Несмотря на то, что я препятствую использованию этих хаков, может потребоваться быстрое исправление вашей проблемы.
Я нашел этот трюк пару недель назад и, похоже, работает одинаково во всех браузерах.
Создайте единую графику, содержащую как панель поиска, так и кнопку поиска. Сделайте это фон вашей формы с помощью стилей CSS. Затем отрегулируйте как текст, так и кнопку отправки (вероятно, через классы или идентификаторы), чтобы иметь {border: 0; background: transparent}, а затем просто отрегулируйте высоту и ширину элементов формы, чтобы они соответствовали макету вашего фона формы. Ранее я использовал < input type = "image"... / > но никогда не мог правильно выровнять выравнивание, независимо от того, как я стилизовал или наполнил его. Этот метод работает очень хорошо после вашей первой настройки поля элементов формы, заполнения и абсолютного позиционирования, если это необходимо (вы можете оставить границы видимыми во время тестирования, чтобы вы могли правильно разместить его).
Я также считаю удобным помещать {cursor: pointer;} в мою кнопку отправки сообщения, а иногда и другие входные данные формы, чтобы дать визуальную подсказку, что это подлежащая подаче форма, и людям предлагается щелкнуть.
Посмотрите http://rafael.adm.br/css_browser_selector/
маленький js файл, который добавляет классы в тег body, такие как .webkit,.chrome и т.д., которые вы можете использовать в своей таблице стилей.