Question

select字段具有相同的size属性，但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文件或样式块中;

<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>

Answer 3

这个解决方案怎么样？它使用css来初步“修复”问题，然后在列表更改时使用javascript（因为我假设您使用javascript来执行列表更改）。（我使用了jquery，因为上升的选择器.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>

选择字段的布局问题（firefox）

3 个答案: