<select> with size属性:iPhone呈现空白

Question

渲染下面的选择下拉列表时,iPhone将其呈现为空白.我怎样才能解决这个问题？

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

上面的例子来自http://www.w3schools.com/tags/att_select_size.asp.他们的样本是http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

在Firefox(以及所有其他浏览器)中,它呈现为:

但是,在iPhone上,它呈现为空白.这对可用性非常不利,因为访问者不知道框中的内容(在我们的应用程序中,它是从多种可能性中选择地址).

我创建了一个JSFiddle:http: //jsfiddle.net/bqMEv/3/ iPhone渲染如下; 请注意,两者都没有显示:

• 大小大于1
• 和高度在CSS中指定
• 并且未选择任何选项

删除CSS高度表明iPhone忽略了size属性.

Answer 1

基于堆栈溢出的其他主题的内容,看起来没有标准的方法来做到这一点:

• Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
• jquery插件将<select size ="10">转换为Safari移动版(iOS)上的可用列表

但第二个主题的作者编写了一个模拟该行为的插件:https://github.com/redhotsly/safarimobile-multiline-select