< select> with size属性：iPhone呈现为空白 [英] <select> with size attribute: iPhone renders blank
问题描述
当渲染如下所示的选择下拉列表时，iPhone会将其空白。如何解决此问题？
< select size =3>
< option value =volvo>沃尔沃< / option>
< option value =saab> Saab< / option>
< option value =opel> Opel< / option>
< option value =audi>奥迪< / option>
< / select>
上述示例来自 iPhone的渲染如下：请注意，两者都不会显示任何内容：
- 尺寸大于1
- 在CSS
- 且未选择任何选项
删除CSS高度显示iPhone忽略大小属性。 p>
看起来没有标准的方法，基于堆栈溢出的其他主题的内容：
但第二个主题的作者写了一个模拟该行为的插件： https://github.com/redhotsly/safarimobile-multiline-select
When rendering a select dropdown as below, the iPhone renders it blank. How can I fix this?
<select size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
The above example from http://www.w3schools.com/tags/att_select_size.asp. Their sample is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size
In Firefox (and all other browsers), it renders as:
However, on an iPhone, it's rendered blank. This is very bad for usability as the visitor doesn't know what's in the box (in our application, it's for selecting their address from several possibilities).
I've created a JSFiddle: http://jsfiddle.net/bqMEv/3/ The iPhone rendering is as follows; note that there's nothing shown when both:
- size is greater than 1
- and height is specified in CSS
- and no option is selected
Removing the CSS height shows that the iPhone ignores the size attribute.
Looks like there is no standard way to do it, based on content of other topics on stack overflow:
- 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)
But author of the second topic wrote a plugin that emulates that behavior: https://github.com/redhotsly/safarimobile-multiline-select
这篇关于< select> with size属性：iPhone呈现为空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
