展开后：

但在IOS模拟器下，显示的样式如下：

于是前天晚上开始决定，一定要把select用HTML实现，用了不少于3个小时，终于完成，如下2图的效果。

展开后：

在各种浏览器下，下拉菜单都显示正常(如上图)。只有IE6下，下拉菜单会错位，如下图：

导致这个原因的产生，是很复杂的，为了解决这个错位的小问题，昨天和今天，用了不少于5个小时，终于解决了。工作中，有时就是为了一个看似很简单的小问题，一定要和这个小问题死拼到底，非要解决不可。

为什么会产生这个问题呢？因为模拟<select>，就必须用绝对定位position:absolute，使其悬浮起来，才能达到仿select效果。正好此处的位置，之前有个<center>标签将它包含住了，其错位的位置，IE正好是将<center>的居中位置，作为position:absolute的横向坐标的起点，我做了一个测试页，效果如下图：

上图中，翠绿色的层，就是在IE中错位的效果。下图是火狐、Chrome等浏览器下正常显示的效果：

说明火狐、Chrome等浏览器，position:absolute不受当前位置有<center>居中定义的影响。

为了解决这个问题，当中花费的5个小时以上，尝试了各种办法，主要是把这个交互层，切分为上、中、下3块。其中，中就是这个下拉菜单，但还是有各种问题，主要的问题在于由于被切分成上、中、下3块，使整个交互层的阴影效果难以设定，每个块都要需要单独设定阴影效果，还有个问题是在手机浏览器下，块之间有条水平线，在电脑下则没有这个问题。反复切分重构8-10次，都以失败告终，于是，放弃了这个方案。

昨晚睡觉前，突然想起<table>元素，能将<center>元素、或者很多样式表定义隔离。今天早晨做了尝试，果然见效，而且也不需要将交互层切分。这样，在IE下也不错位了。但还有个问题，position:absolute在火狐、Chrome等浏览器下的宽度会失效。于是给它定义宽度，定义完成之后，在IE下宽度又不一致。

最后，再想办法，上面的宽度定义保留，最后加一句，用JavaScript获取非position:absolute的宽度，将这个宽度传递给这个position:absolute的位置，方法如：
abc1.style.width=document.getElementById('abc2').clientWidth-2;

由于abc1.style.width=document.getElementById('abc2').clientWidth;语句的实测效果，在各种浏览器下，总是会多出2像素，所以最后减2。

为什么这个小问题会花费超过5个小时的时间？因为在上述的第5幅截图，下拉菜单有个“×收起”的按钮。昨天花了很多时间，本来是调试为在非下拉菜单的任意位置点击，下拉菜单会消失。调试中，这个功能有时会和右上角的语言下拉菜单冲突，暂时未解决，最后决定暂时用这个“×收起”的按钮。

本文只记录了心酸的繁重劳动的冰山一角。本文只涉及到前端的调整，后端的巨量开发，各种逻辑编排、数据库设计，很多没有像这样用文字表达出来。