Мы знаем, что свойства тега SELECT в каждом браузере и поддержка каждого браузера различны, что приводит к тому, что поле выбора выбора отображаются по -разному в каждом браузере. Ниже мы создаем полностью совместимый выбор через поддержку основных атрибутов CSS.
Я использовал метод управления переменными для написания демонстрации для тестирования трех ситуаций в каждом браузере: высота.100.padding.0, height.no.padding.100, № Height.no.padding. Результаты следующие: ссылка изображения, появление демонстрации каждого браузера.
Мы можем получить следующие атрибуты исследования.
IE6 | IE7 | IE8 | IE9 | фф | гнездо | SF | доклада | |
Высота по умолчанию | 22px | 22px | 19px | 20 пл | 19px | 19px | ||
высота | Фон | Т | Т | Т | Т | Т | Фон | Т |
прокладка | Фон | Фон | Т | Т | Т | Т | Фон | Т |
линейная высота | Фон | Фон | Фон | Фон | Фон | Фон | Т | Фон |
Текст по вертикали центрирован | Т | Т | Т | Фон | Фон | Т | Т | Т |
Благодаря вышеупомянутой сводке атрибутов результатов исследования, мы знаем, что IE6 установлен на установке на 22px и в любое время неизменным, в то время как другие браузеры, кроме Safari, поддерживают атрибут высоты, поэтому мы устанавливаем высоту: 22px. Итак, теперь давайте поправляем браузер Safari. Мы обнаружили, что только Safari поддерживает атрибут высоты линии, поэтому вы можете использовать высоту линии, чтобы исправить его высоту до 22px. Когда размер шрифта составляет 12px, установлена линия линии: 22px. В конце концов, текст в FF и IE9 не сосредоточен, а накладка: 2PX 0 установлено. Мы обнаружили, что FF и IE9 центрированы, но высота выбора каждого браузера не увеличилась. Таким образом, здесь есть небольшие сомнения, под настройкой высоты настройка небольшого количества чисел не увеличивает общую высоту?
Ниже приведен полностью совместимый пример кода.
Скопировать код