与大小属性：iPhone呈现空白(<select> with size attribut

当如下渲染选择下拉列表中，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忽略大小属性。

Answer 1:

貌似有做它的基础上，对堆栈溢出等主题内容的标准方式：

Safari浏览器的移动多行<选择>又名GWT多行列表框
jquery插件到<选择大小=“10”>转换为在Safari移动一个可用的列表（IOS）

但是，第二个议题的作者写道模仿这种行为插件： https://github.com/redhotsly/safarimobile-multiline-select

Answer 2:

我简单的解决这个，使用jQuery：

$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
$('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>');
}
});

是这样的：