代码之家 › 专栏 › 技术社区 › Christopher Klewes

选择字段布局问题(Firefox)

firefox css html

Christopher Klewes · 技术社区 · 14 年前

这个 select 字段具有相同的大小属性,但 options 具有具有特定填充的类(所有类都是同一类)。但是如果空的select字段没有,那么它现在的长度就不同了。 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>

连接后(第二个选项出现 选择 字段)高度交换为与第一个长度相同的长度

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

在不指定两者的绝对高度的情况下解决此问题的任何想法 选择 领域?

3 回复 | 直到 14 年前

Rob Van Dam 14 年前

这个解决方案怎么样?它首先使用css“修复”问题,然后在列表更改时使用javascript(因为我假设您使用javascript进行列表更改)。(我使用jquery是因为ascendant selectors.has/:has对于这种情况非常方便,但是您可以在纯JS中做更多的工作。

CSS很容易解释,但请注意20px通常是2* select size * option padding + 2 select padding 在这种情况下,结果是2*10*1+2*0=20,但仅仅是因为我删除了默认的浏览器填充(在火狐中是1px)。因此,如果您希望在select本身上添加一些填充,请确保将其合并到您的虚拟底部填充值中。

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

graphicdivine 14 年前

这是火狐非常奇怪的行为。您可以通过添加虚拟对象来修复它 <option> </option> 空选择中的占位符。然后,我想,为了完全健壮,当您有一些真正的选择时,您可能希望通过编程将其删除。

Amad 14 年前

为您的选择提供一个类名,并将下面的代码添加到您的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>