选择框选项 - 列表显示在Chrome页面之外 [英] Select box option-list appears off the page in Chrome

问题描述

我使用PHP创建了一个 select 列表，当点击它从下拉列表中选择一个选项时，跳转到页面顶部显示3个选项，其余的都在页面之外。

I have created a select list using PHP, and when clicking on it to select an option from the drop down the option list jumps to the top of the page showing about 3 options, and the rest are off the page.

只有在Chrome中才会出现。

It only happens in Chrome. Is there a way to fix this using CSS?

这里是相关的代码：

<tr>
    <td><label>Manufacturer</label></td>
    <td>
        <select id="prodManufacturer" class="validate[required]" name="prodManufacturer">
            <?php foreach($aAllManufacturer as $aManufacturer){ ?> 
                <option value="<?php echo $aManufacturer['prod_manufacturer_id']; ?>">
                    <?php echo $aManufacturer['prod_manufacturer_name']; ?></option>
            <?php } ?>
        </select>
    </td>
</tr>

CSS

CSS

#productFormContentWrapper select {
    margin: 0;
    padding: 0;
    color: #9d1116;
    font-size: 18px;
    padding: 3px;
}

推荐答案

如果控件显示为滚动列表框，则此属性
表示列表中的行数，可见
一次。 浏览器不需要以
滚动列表框的形式显示选择元素。

省略 size 属性或将其值设置为 0 （或 1

Simply omit the size attribute or set its value to 0 (or 1, if following the HTML5 specs, but this apparently causes legacy issues, so avoid it for now).

查看实时 demo on jsFiddle 。

See a live demo on jsFiddle.

• 在MDN上选择元素

这篇关于选择框选项 - 列表显示在Chrome页面之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！