iphone - <select> 大小属性为 : iPhone renders blank

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 height 表明 iPhone 忽略了 size 属性。

Answer 1

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

• Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
• jquery plugin to convert a <select size="10"> to a usable list on Safari mobile (iOS)

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