php - 选择框选项列表出现在 Chrome 的页面之外

Question

我select使用 PHP 创建了一个列表，当单击它以从下拉列表中选择一个选项时，选项列表会跳转到页面顶部，显示大约 3 个选项，其余选项不在页面上。

它只发生在 Chrome 中。有没有办法使用 CSS 来解决这个问题？

以下是相关代码：

HTML

<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

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

Answer 1

根据 Mozilla 开发者网络：

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

只需省略该size属性或将其值设置为0（或者1，如果遵循 HTML5 规范，但这显然会导致遗留问题，因此暂时避免使用它）。

在 jsFiddle 上查看现场演示。

参考：

• selectMDN 上的元素