input,select等表单元素在Android2.3默认浏览器下失效的问题

我遇到的问题

某一天，我心情还算不错的去上班，本来打算比较清闲的荒废这一天的。

可是一到公司,xxx拿着一款价值￥1999，搭载基于Android2.3深度定制的xxx操作系统的xxx手机到我的身边,这个页面的表单都填不了，这么严重的问题！让用户怎么用！

我操，都什么年代了，还用Android2.3。低头想了一会…原来这是一个混乱的年代啊！

解决问题

我不知道该怎么办，上线之前，我测了N多手机，都没问题。现在看来，是我忽略了一个很重要因素，我忽略了这是一个混乱的年代啊！Oh shit！但我很快静下心来，翻墙上了Google，输入”the select element does not work on android 2.3″，虽然我英文很好，但我在打那句英文的时候还在纠结那里到底是用”in”还是用”on”，可我回车之后发现那根本不重要,重要的是我找啊找，找啊找，终于找到我想要的东西了，哈哈

http://stackoverflow.com/questions/10884011/html-select-not-working-in-android

如果上面stackoverflow网站的链接打不开或者打开较慢的话，可以看下面的截图。

问题截图：

该问题的两个回答截图：

第一个回答者是说把viewport的meta标签内的user-scalable=no改成user-scalable=yes。我试了，没用。。。

第二个回答者是说页面里有fixed定位元素，并且该元素里还有absolute定位元素，就会导致页面里的select点不动！我靠，这说的就是我的那个页面啊，我写的头部是fixed定位的，里面有两个按钮是absolute的，OMG！于是我把头部fixed内的absolute元素拿掉，立马管用了，哈哈！

顺藤摸瓜

嗯，把问题解决掉，心头一块石头落地后，清闲的荒废一天的念头又重新燃起，哈哈

于是我怀着这样的念头清闲了几分钟后发现，好无聊啊，还是做一个有上进心的青年吧！嗯，我行的！

刚才打开的那个stackoverflow的链接还没有关，我又看了一遍，发现一个很重要的线索，我发现这个回答者提到了jquery mobile team。如此说来，他的回答是来自jquery mobile团队的。嗯，jquery mobile里的头部和尾部都是可以fixed的，他们这么强大的团队肯定早就遇到过这个问题了啊！我怎么就没想到呢！oh shit，我早该想到的！OMG！取法乎上啊！

calm down~~,我打开jquery mobile网站，在里面一通找啊找啊…哈哈！找到啦！

http://demos.jquerymobile.com/1.4.2/toolbar-fixed/#ui-page-top

在这个demo页面里，我仿佛得到了宝藏~~
下面有这样一大块内容：

Known issues in Android 2.2/2.3

Android 2.2/2.3’s implementation of position: fixed; can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues, particularly in the case of position: absolute elements inside of position: fixed elements. While we’ve done our best to work around a number of these unique bugs within the scope of the library, custom styles may cause a number of issues.

• Form elements elsewhere on the page—select menus in particular—can fail to respond to user interaction when an empty absolute positioned element is placed within a fixed position element. In rare cases—and specific to Android 2.2—this can cause entire pages to fail to respond to user interaction. This can seemingly be solved by adding any character to the absolute positioned element, including a non-breaking space, and in some cases even whitespace.
• The above-described issue can also be triggered by an absolute positioned image inside of a fixed position element, but only when that image is using something other than its inherent dimensions. If a height or width is specified on the image using CSS, or the image src is invalid (thus having no inherent height and width), this issue can occur. If an image that is inherently, say, 50×50 pixels is placed in a fixed element and left at its inherent dimensions, this issue does not seem to occur.
• When a position: fixed element appears anywhere on a page, most 2D CSS transforms will fail. Oddly, only translate transforms seem unaffected by this. Even more oddly, this issue is solved by setting a CSS opacity of .9 or below on the parent of the fixed element.
• Combinations of position: fixed and overflow properties are best avoided, as both have been known to cause unpredictable issues in older versions of Android OS.
• Any element that triggers the on-screen keyboard, when placed inside a position: fixed element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.

While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android’s native browser.

我用我牛到没朋友的英文水平翻译了一下：

关于fixed定位在android 2.2/2.3下遇到的问题

当在android 2.2/2.3下使用 position:fixed 的时候，你的页面可能会由于一些看似没关联的CSS样式或者HTML结构而出现一些问题。最典型的就是一个fixed定位元素里有absolute定位元素。我们已经尽力整理了一些相关的问题列了出来。

• 当一个fixed定位元素A里包含了一个absolute定位元素B，并且B元素里面什么都没有(注意！连一个空格都没有！)的情况下，那么在当前页面里任何位置的表单元素(尤其是select元素！)就会失去交互效果，怎么点都点不了!这个问题可以通过在B元素里加上一个不间断空格   来解决(有时甚至直接打一个空格就可以-按一下键盘上的空格)。
• 还有一种情况会导致上面所说的问题。如果上面的B元素是一张图片的话，并且该图片的尺寸不是继承得来的，而是用CSS给它设置了固定宽或高。再就是该图片找不到，也会导致这个问题(因为图片如果找不到的话，它就不会有继承的尺寸)。这里需要注意的是，如果该图片尺寸是50px*50px大小，但这个尺寸是继承得来的，而不是自己设置死的，那么就不会出现这个问题。
• 当页面上有fixed定位元素时,对它的大部分的CSS3 2D变幻将失效。奇怪的是，只有变幻translate属性时才不会受此影响。更奇怪的是，你给fixed定位元素的父层设置opacity为0.9或0.9以下的样式后，这个问题就可以解决，哈哈
• fixed定位最好不要和overflow属性一起使用，当他们一起使用的时候，在比较旧的android版本中会出现一些意想不到的问题！
• 当把可以呼出键盘的元素(一般指可输入的表单元素)放到fixed定位的元素时，如果你用的不是默认的键盘(请允许我叫它输入法)，那么这时就会没办法输入。

我们将会继续尽最大努力去解决这些BUG,当然，我们还是建议您在没有经过大量测试的情况下(指android各版本的默认浏览器)，尽量避免在fixed定位里写太复杂的结构或样式。

哇，翻译完感觉自己又变厉害了！哈哈！