Установка высоты < выберите > в Firefox 2

StackOverflow https://stackoverflow.com/questions/1614206

Вопрос

У меня странная проблема с высотой поля выбора HTML в Firefox 2, вот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

Высота на 2 пикселя больше - отступы, размер шрифта и высота строки, кажется, не влияют на это, и у меня закончились идеи и места для поиска. Должен ли я считать, что фактическая высота блока выбора в FF2 всегда равна css height + 2? Могу ли я это исправить или обойти это?

Это было полезно?

Решение

Добро пожаловать в удивительный мир стилей управления формами.

Не желая казаться пораженцем, я думаю, ты должен просто сдаться. Независимо от того, как вы стилизуете элементы управления формой, всегда будут браузеры, которые полностью игнорируют ваши стили. Я считаю, что Safari игнорирует большинство CSS. См. « стилизация элементов выбора » на 456 Berea Street для примеров.

Есть альтернативы, использующие Javascript - я считаю, что Пользовательский интерфейс jQuery имеет некоторые виджеты, похожие на элемент select. Вы также можете использовать это меню щелчка jQuery и прикрепить функцию, которая устанавливает значение скрытое поле ввода. Я делал это раньше, и это прекрасно работает. Подобные вещи - единственный способ получить полный контроль над размером и внешним видом.

Другие советы

В игре могут быть некоторые настройки браузера по умолчанию. что происходит, если вы используете сброс CSS и затем применяете ваши стили? Это все еще 2px выключен?

Откажитесь от использования CSS для стилизации. Охватите jquery / javascript.

Вы захотите создать свои собственные изображения и использовать событие щелчка этих изображений для переключения фактических входов формы. Эти входные данные формы должны отображаться в стиле контейнера: нет. Таким образом, вы можете создать его так, как хотите.

Вот хорошая статья на эту тему: http: //www.noupe. ком / CSS / элементы формы-40-cssjs-укладка-и-функциональность-techniques.html

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top