Eonval项目开发进度(4):用HTML模拟select,一个小问题用了不少于8小时解决,心酸的繁重劳动

王志勇 发表于 2019年02月26日 09:30

select下拉菜单本来都已经做好了,在火狐、Chrome、IE、手机自带浏览器下测试,都没问题,样式如下图:

展开后:

但在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幅截图,下拉菜单有个“×收起”的按钮。昨天花了很多时间,本来是调试为在非下拉菜单的任意位置点击,下拉菜单会消失。调试中,这个功能有时会和右上角的语言下拉菜单冲突,暂时未解决,最后决定暂时用这个“×收起”的按钮。

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

2条评论:
1   default 2019-02-26 20:21
自己写的下拉框组件吗?应该有很多类似的开源组件可以选择吧
https://www.google.com/search?safe=strict&ei=pS51XNSXBfK4mAWJj7uABw&q=%E4%B8%8B%E6%8B%89%E6%A1%86+%E7%BB%84%E4%BB%B6&oq=%E4%B8%8B%E6%8B%89%E6%A1%86+%E7%BB%84%E4%BB%B6&gs_l=psy-ab.3..0i12.1964.1964..2272...0.0..0.111.111.0j1......0....1..gws-wiz.NyDn2tYee_8

自由勇 2019-02-27 08:05
是的,谢谢!

发表评论:
名字: (*必填)
博客: (可省)

正文:

  记住信息?

王志勇:1980-09-26 (44周岁)
程序设计,前端设计。

版权声明:本博客所有文章,均符合原创的定义,禁止转载,违者将必究;正确的方法是贴原文的标题和网址即可。

与此相关的链接
自由勇专栏

Blog存档 Archives

2022年07月
2022年06月(15)
2022年05月(20)
2022年04月(16)
2022年03月(9)
2022年02月(9)
2022年01月(10)
2021年 +

2020年 +
2019年 +
2018年 +
2016年-2017年(9)
2014年06月-09月(10)
2013年 +
2012年 +
2011年 +
2010年 +
2009年 +
2008年 +
2007年 +
2006年 +
2005年09月(4)

Copyright © 2006-2024 auiou.com All rights reserved.
此Blog程序由王志勇编写