Установка высоты <select>в Firefox 2 - PullRequest
Новая
       24

Установка высоты <select>в Firefox 2

0 голосов
/ 23 октября 2009

У меня странная проблема с высотой окна выбора 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? Могу ли я это исправить или обойти это?

Ответы [ 3 ]

1 голос
/ 23 октября 2009

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

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

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

0 голосов
/ 25 октября 2009

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

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

Вот хорошая статья по теме: http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html

0 голосов
/ 23 октября 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...