微构网络

实用技巧:虚虚实实让你做的网站兼容性更强(表单兼容)

2015-06-26 19:58 栏目:技术教程 查看(2,767)

做过前端开发的朋友都应该知道,兼容性问题是让我们特别头晕的事情,很多时候我们需要话20%甚至更多的时间去解决我们写出来的页面的兼容性问题。而兼容性问题是存在各个方面的,表单的兼容性尤其让很多人头疼;普通的标签可能在适用html5的浏览器上可能兼容性问题已经得到了很好的解决,而表单的兼容性依然让人抓狂的。

很多搞前端的朋友都在想,如果世界上的浏览器都是同一种的同一个版本该多好啊,就可以解放更多的时间用于做更有意义的事情。当然事实上,确实而随着微软放弃,很多项目已经舍弃了IE6的支持,也有部分已经舍弃了对IE7的支持,更有一些已经舍弃了对IE8的支持。但有时候项目需求,我们必须解决一些问题,这是不可逃避的。

而实际上解决这类问题,我们完全可以采取虚虚实实的策略,这点对于处理表单的兼容性是特别有用的。比如表单的输入框、单选框、复选框、下拉框,我们很多时候用替换的思想就可以避免表单标签的兼容性差的问题,而把容易出问题交给普通标签,而普通标签兼容性将更强。

下面以一个例子来说明,当然这个例子中就算用完全的表单标签来做兼容性也算可以,只是提供一种思路;当然实际上的项目当中,我也会采取这种策略,因为我还是比较喜欢那种常规的标签,也许这也是属于一种强迫症吧。

xxx

上面这个就是我们正在做的一个项目的一个小部分——一个普通的评论框,当然这个没什么技术难点。而实际上很多人,特别是刚入门不就的开发者,总是固定的思维,把边框加在了输入框里边。而实际上的结构并不是这样的,我们就是用一个普通的标签div来代替textarea应该做的事情——如这里的边框和内边距等。如图就是它的基本层次结构。

eeqe

 

我们也可以分享给大家这个部分的html部分的源代码,而CSS代码就不贴出来的,如果贴出来很多人可能直接照搬过去,对与实践没任何意义。其实看了html的结构基本上就知道CSS该怎么写,当然这个人得具备最起码的项目实践能力。

qeq这个例子是一个特别简单,然而又是特别典型的;而这种虚虚实实的思维对我们处理前端的某些疑难杂症是特别实用的。而且这些东西基本上不会有人分享,包括我在这里也仅仅是分享一个特别简单的例子,因为这样的问题实在是不好表单,我们可以理解为是“只可意会不可言传”吧,而标准的教材里面更是不会用有限的篇幅来写这些东西的。而掌握这些技巧的方法,没别的路径,只有吸收别人的思维,然后去多实践。

 

转载请注明出处:实用技巧:虚虚实实让你做的网站兼容性更强(表单兼容) - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)