Question

我已经使用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;
}

Answer 1

根据Mozilla开发者网络的说法：

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

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

查看实时 demo on jsFiddle 。

<强>参考文献：

select element on MDN

Chrome中的页面旁边会显示选择框选项列表

HTML

CSS

1 个答案: