совместимость css-прокладок firefox 9 хром 15 - PullRequest
0 голосов
/ 31 января 2012

Я использую CSS градиенты и отступы для имитации кнопок вокруг тега привязки.Проблема, с которой я сталкиваюсь, заключается в том, что Firefox, кажется, делает кнопку на 3 пикселя больше.1 пиксель сверху и 2 снизу.Похоже, это происходит не только с примером, который я разместил, но и везде на странице, где я использую отступы.Я поднял и пример на http://wemw.net/example.php. В Firefox верхняя и нижняя кнопки отлично сочетаются с полем поиска, но в хромированном, как я сказал, выключено на 1 пиксель сверху и 2 снизу.Я использую переходный тип w3 (также попробовал строгий) и css reset.При сбросе все теги привязки установлены на padding: 0, поэтому я не понимаю, почему добавляется этот дополнительный отступ.Есть ли обходной путь к этому или это просто то, с чем вам приходится сталкиваться при работе с браузерами Gecko и WebKit?

РЕДАКТИРОВАТЬ: Итак, я вошел в Windows, и теперь он отображается одинаково в обоих браузерах.Я предполагаю, что это конкретные проблемы ОС?Поскольку не так много людей используют Linux, я собираюсь изменить отступы, чтобы он работал, но в интересах согласованности кто-нибудь может предложить решение для кросс-браузерных кросс-ОС?У меня нет Mac, и я не могу легко проверить его там, но если у windows / linux могут быть проблемы с теми же версиями тех же браузеров, можно ли предположить, что у mac также могут быть проблемы, о которых я не знаю?

1 Ответ

0 голосов
/ 31 января 2012

Это не заполнение тега привязки, это размер текстового поля, который не согласуется. <input> элементы всегда вызывали у меня и такие проблемы, и мне всегда было очень утомительно красиво их выравнивать (вы еще не видели этого в IE8, не так ли?). Я думаю, что самым простым кросс-браузерным решением здесь было бы удалить границу из текстового поля и использовать вместо этого фоновое изображение (или, что еще лучше, фоновое изображение для элемента, содержащего текстовое поле), правильно выровненное по кнопке.

...