选择字段的布局问题（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> </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>