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

问题描述

限时删除！！

当渲染如下所示的选择下拉列表时，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>

解决方案

看起来没有标准的方法，基于堆栈溢出的其他主题的内容：

但第二个主题的作者写了一个模拟该行为的插件：

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

这篇关于&lt; select&gt; with size属性：iPhone呈现为空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..