Question

以下代码生成一个包含2个选项的列表框：

<select size="10">
 <option>1</option>
 <option>2</option>
</select>

是否可以始终在此列表框中显示垂直滚动条？我问这个问题因为style =“overflow-y：scroll;”在IE7中不起作用。

Answer 1

它可以在IE7中运行。但是，您需要修复size小于option的数量，而不是使用overflow-y:scroll。在您的示例中，您有2 option，但您设置size=10，这将无效。

假设您的选择包含10 option，然后修复size=9。

此处，在您的代码参考中，您使用了height:100px size:2。我删除了height css，因为它没有必要并更改了size:5，它运行正常。

以下是来自jsfiddle的修改代码：

<select size="5" style="width:100px;">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 <option>6</option>
</select>

这将生成比size:2创建更大的选择框。如果小size，则选择框不会显示滚动条，您必须使用适当的size数量进行检查。滚动条如果单击滚动条的上下图标，它将起作用。我在你的小提琴中显示了size:2和size大于2的例子（例如：3,5）。 / p>

这是您想要的结果。我认为这会对您有所帮助：

<强> CSS

  .wrapper{
    border: 1px dashed red;
    height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 150px;
 }
 .wrapper .selection{
   width:150px;
   border:1px solid #ccc
 }

<强> HTML

<div class="wrapper">
<select size="15" class="selection">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>
</div>

Answer 2

我猜你不能，这可能是一个限制或不包含在IE浏览器中。我已经尝试过你的IE6-8的jsfiddle，并且所有这些都没有显示滚动条并且不确定IE9。在FF和chrome中显示滚动条。如果可能的话，我也想看看如何在IE中做到这一点。

如果您确实要显示滚动条，可以添加假滚动条。如果您熟悉RIA中使用的某些js库。与jquery / dojo一样，某些选项是可编辑的，因为它是textbox + select的组合，或者也可以是textbox + div。

例如，请参阅here JavaScript，使其选择为可编辑。

Answer 3

添加：

overflow-y: scroll

在你的css萌芽。

始终在<select> </select>中显示垂直滚动条

3 个答案: