проблема макета с полями выбора (Firefox)

Question

Поля select имеют оба одинаковых атрибута размера, но options имеет класс с определенным заполнением (все тот же класс). Но пустое поле выбора теперь имеет другую длину, если в нем нет элементов option.

+-------------+         +-------------+
| foo         |  +---+  |             |
| bar         |  | > |  |             |
| baz         |  +---+  |             |
|             |         |             |
|             |  +---+  |             |
|             |  | < |  |             |
|             |  +---+  |             |
|             |         +-------------+
+-------------+

HTML

<style type="text/css">    
  select option {padding:1px;}
</style>

<select size="10" style="width:100px;">
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
</select>

[...]

<select size="10" style="width:100px;">
  <!-- empty yet -->
</select>

После подключения (во втором поле select появилась новая опция) высота меняется на ту же длину, что и у первого

+-------------+         +-------------+
| foo         |  +---+  | baz         |
| bar         |  | > |  |             |
|             |  +---+  |             |
|             |         |             |
|             |  +---+  |             |
|             |  | < |  |             |
|             |  +---+  |             |
+-------------+         +-------------+

Любая идея решить эту проблему без указания абсолютной высоты для обоих полей select?

Answer 1

Это довольно любопытное поведение от Firefox. Вы можете исправить это, добавив фиктивный заполнитель <option>&nbsp;</option> в пустой выбор. Тогда, я полагаю, чтобы быть полностью устойчивым, вы можете захотеть удалить его программно, когда у вас есть реальные варианты.

Answer 2

Как насчет этого решения. Он использует css для первоначального «исправления» проблемы, а затем javascript при изменении списков (поскольку я предполагаю, что вы используете javascript для внесения изменений в список). (Я использовал jquery, потому что селекторы с асцендентом .has /: has очень удобны для этого случая, но вы могли бы сделать то же самое с немного большей работой в чистом js).

CSS довольно понятен, но учтите, что 20px в общем случае составляет 2 * select size * option padding + 2 * select padding, что в данном случае составляет 2 * 10 * 1 + 2 * 0 = 20, но только потому, что я удалил заполнение браузера по умолчанию (в Firefox это 1px). Поэтому, если вы хотите добавить некоторые отступы к самому выделению, убедитесь, что вы включили его в значение фиктивного нижнего отступа.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    function add() {
        // real add code here
        $('#right').append('<option>new foo</option>');
        fix_select();
    }

    function remove() {
        // real remove code here
        $('#right').html('');
        fix_select();
    }

    function fix_select() {
        $('select').has('option').css('padding-bottom', '0');
        $('select').not(':has(option)').css('padding-bottom', '20px');
    }
</script>

<style type="text/css">
    select { padding: 0 0 20px 0; }
    option { padding: 1px; }
</style>

<select id="left" size="10" style="width:100px; padding-bottom: 0;">
    <option>foo</option>
    <option>bar</option>
    <option>baz</option>
</select>

<select id="right" size="10" style="width:100px;">
</select>
<br/><br/>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>

Answer 3

Дайте имя класса на ваш выбор и добавьте следующие коды в ваш файл CSS или блок стилей;

<style type="text/css">    
    .ovHell option {padding:1px;}
</style>
<select class="ovHell" size="10" style="width:100px;">
  <option style="padding:1px;">foo</option>
  <option style="padding:1px;">bar</option>
  <option style="padding:1px;">baz</option>
</select>

[...]

<select class="ovHell" size="10" style="width:100px;">
  <!-- empty yet -->
</select>