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;}

时间: 2024-10-06 10:36:31

ie下面表单兼容问题的几条总结的相关文章

MySQL活动期间订单满600元并且在活动日期之前超过30天没有下过单_20161030

计算 活动期间订单满600元并且在活动日期之前超过30天没有下过单 首先拿到这个需求,首先需要明确活动日期区间 10.29-10.31,其次要取这个时间段内某天订单额最高的那天及订单额,再次需要判断这个用户在29号之前下过单,在29号之前的末单日期和10.29号之间的天数间隔大于30天 因此就转化为取两个表日期的问题 1.第一个表取所有用户在10.29号之前的末单日期,末单金额,这个表为主表 后面表left join 它 2.第二个表取活动期间订单额最高的那天(需要嵌套,先把这3天每天金额算出来

JavaScript学习——完成注册页面表单校验

1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值. onsubmit = return checkForm() 2.完成注册页面表单校验(基于HTML&a

表单兼容类型设计

以前的我认为,相同的表单,若有后台代码,那么它对应的应该是一套业务,只能为这个功能服务.但是后来的需求打翻了我的认识. 以前我做的一条线是实现如下功能 这个是一条线的功能,结合工作流,4个活动点对应四个表单. 后来在做第四个功能线的时候发现一部分与功能一相同.但是其中用到的类与对象却不相同.但是页面是稍微变化.还是可以复用页面的. 需求功能大题是一样的.类的设计是不同的子类设计.那么就需要修改原来的代码实现了. 看设计图 先前所有后台的泛型为第一个,后续的复用页面需要用第二个泛型类,但是他们都共

黑马程序员——多线程下的单例设计模式的安全问题

//多线程下的单例设计模式 class Sing { //饿汉式不存在安全问题,因为其不是线程同步的 private static Sing s = new Sing(); private Sing(){} public static Sing getInstance() { return s; } } class Single { private static Single s = null; private Single(){} public static Single getInstanc

淘宝地下刷单盛行 电商新规杀无赦

淘宝地下刷单盛行 电商新规杀无赦专嘴罪孜茁纵咨阻纵紫驻柞足抓啄淘宝地下刷单盛行 电商新规杀无赦 http://www.songtaste.com/user/10296157/info http://www.songtaste.com/user/10296158/info http://www.songtaste.com/user/10296160/info http://www.songtaste.com/user/10296162/info http://www.songtaste.com/u

[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项

前言 在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其他网站购物车功能的用户对全选就特别习惯, 所以他们也希望在下拉单中也能有  "ALL" 这样的选项. 但是Extjs 本身提供的多选下拉单,功能比较有限. 之前有扩充过带 checkbox, 现在又要多扩充一个 "ALL" 选项了. 要求是: 1. 选中"AL

jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)(转)

版权声明]:版权归作者所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.open-lib.com/Forum/Read_69_1.action 前言: 当jquery ajax在utf-8编码下(页面utf-8,接收utf-8),无任何问题.可以正常post.get,处理页面直接获取正确的内容. 但在以下情况下: GBK -> AJAX POST ->GBK UTF-8 -> AJAX POST ->GBK 后台代码无法获取正确的内容,通常表现为获

Swift语言下的单例设计模式实现(SINGLETON)

一.意图 保证一个类公有一个实例,并提供一个访问它的全局访问点. 二.使用场景 1.使用场景 当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时 当这个唯一实例应该是通过子类化可扩展的,并且客户应该无需更改代码就能使用一个扩展的实例时. 2.实现的重要三个步骤 私有化构造方法(Swift不支持) 使用一个静态变量保存实例的引用 提供一个全局的访问方法 三. Swift语言下的实现 Swift语言不支持变量及方法的权限,没有办法隐藏变量及方法,可以随意直接创建一个实例.单例的创建有很多写

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline