选择框选项列表出现在 Chrome 的页面之外答案

【问题标题】：Select box option-list appears off the page in Chrome选择框选项列表出现在 Chrome 的页面之外
【发布时间】：2012-05-29 15:10:04
【问题描述】：

我使用 PHP 创建了一个select 列表，当单击它从下拉列表中选择一个选项时，选项列表会跳转到页面顶部，显示大约 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;
}

【问题讨论】：

你可以给我们一些代码来帮助我们调查问题吗？任何影响选择框/它的容器的 CSS 都会有所帮助。
@Stephen 抱歉回复晚了，我添加了一些代码 sn-ps。谢谢。
抱歉，我认为截图可能更有帮助。如果我正确理解了这个问题，它可能只是一个浏览器错误，你无法控制。

标签： php css google-chrome drop-down-menu

【解决方案1】：

根据 Mozilla 开发者网络：

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

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

观看现场直播demo on jsFiddle。

参考资料：

select element on MDN

【讨论】：