你的位置:首页 > 网页设计

[网页设计]ie下面表单兼容问题的几条总结


  不知道大家学校里面有没有开设网页制作,动态网页等课程,我们学校开了,大二的时候选的静态网页还好,那时初步接触网页,美女老师教用dw8拉出的静态页面,拉着拉着拉出了对网页的兴趣,后来又过了一段时间,大二暑假,实验室有老师接的项目需要学生一起完成,不需要什么基础,于是乎就去了,然后就开始一步一步的自学前端。

  学习是苦逼的,实验室都是后端搞Java的,遇到问题也没人可以问,很多时候百度也没用,就加了很多很多前端群,没人卵我就磨啊磨啊,基本上的问题也是不久就能解决的,项目做完后发现前端基础不扎实,就再复习了一下前面的知识,也多一些总结吧,现在都学了这么久了……好像扯远了,现在大四了,室友们都选修了一门动态网页的课,我也就跟着选了。

  首先第一节课,老师给我们pdf实验指导书,当然是学校自己做的了,不然学生问问题不能回答岂不尴尬,哎,看了一下目录和制作日期,亮了,首先是基本上都是table布局,标签还有过时的标签,日期居然是2007年,8年前的前端技术,还有多少现在敢用的,也许这就是教基础吧,我不过多评论(毕竟老师是搞Android的)。

  然后老师来句,有基础的做一个注册界面就是了,没基础的跟着指导书敲代码,直接用dw拉也行,最后标签越多得分就越高0.0。好吧,然后我就简单的做了一个登录注册页面,就一个选项卡就搞定了,写了一点小小的表单验证,用了点css3动画,幸好实验室电脑装了Google浏览器,最后给了个浏览器检测“您的浏览器是低版本ie,想更好地体验,请用Google打开”,然后就提交到服务器上叫老师查看,后来的我就不说了,老师用的ie6打开,喊我把脚本禁用了,他电脑没好像装Google……

  好吧,又扯远了,我是想说虽然ie已经退出舞台了,但是好多高校仍然再用,所以ie兼容性仍然需要掌握的

  今天先对ie下我遇到的表单的一些兼容总结一下吧(有些是百度的,然后自己测试了一下,确实有问题),大概就这么6点吧,肯定还有,以后遇到再加:

  1.在IE6,7下输入类型的表单控件上下各有1px的间隙(经常需要在input外面套一个div,于是这个问题就不可避免了)

    解决办法:给input加浮动

  2.在IE6,7下输入类型的表单控件加border:none;

    解决办法: 重置input的背景 或者 border:0;

  3.当inline-block与text-indent在IE6、7下相遇后

  text-indent为负时,元素向左偏移,text-indent为正时,元素向右偏移。在这种情况下,元素的偏移量由text-indent和margin值决定,如:margin-  left:-10px; text-indent:10px相当于margin-left:0; text-indent:0元素没有偏移。

input、select、textarea的默认display皆为inline-block,因此都有这个问题。

  解决方法一:ie67,用display:block;

  解决方法二:用padding代替text-indent;

  4.ie6下面input背景图片滚动

    解决方法:在外面套一层div,背景图片写在div里面,input背景transprent或none。

  5.ie6下面label(radio、checkbox)不加for属性没有效果

    <label for="man"><input type="checkbox" id="man">man</label>

  6.ie6下面textarea默认有滚动条

    解决方法:textarea{overflow:auto;}