超全的IE兼容性问题及解决方案

1.怪异盒模型:在老版本IE下不设置文档声明,页面就会进入怪异盒模型解析,所以要设置文档声明;

2.IE6下,子元素的宽高超出父级的宽高 :可以把父级设 置好的宽度撑开

3.在IE6下,块属性元素的高度小于19px:高度会按照19px显示处理
(解决办法:overflow: hidden; 把显示于高度之外的多余部分不显示)

4.在chrom下,文字大小小于12px:文字大小最小只能设置12px,设置低于12px都会当成12px处理
(解决方法:用图片代替)

5.在IE6下,1px的点线会被显示成虚线:dotted会显示成dashed
(解决方法:用图片代替)

6.在IE6下,边框加transparent的情况:边框还是会显示黑色
(解决方法:border-style设置成虚线)

7.对于HTML5新增标签部分浏览器无法识别问题:用JS定义
{document.createElement("header") 然后把header的display:block;}

8.在IE6,7下不支持给块标签加inline-block: 只是加给块元素不支持,加给内嵌式支持的并且可以触发haslayout,加给块加了之后没反应,块标签还是独占一行
(解决方法:在inline-block下添加以下代码{display:inline; zoom: 1;})

9.在IE6下父级有边框造成子元素margin失效的问题
(解决方法:触发haslayout)

10.在IE6,7下,浮动元素的父级设置了宽度的话,不需要清浮动

11.元素浮动之后,如果宽度可以固定,一定记得设置固定宽度,如果宽度需要内容撑,就给它里面的块元素都加上浮动

12.IE6下双边距BUG在IE6下,块元素有浮动有横向的margin,横向的margin值会被放大成两倍
(解决方法: display:inline; 把块元素变成内嵌)

13.IE6下最后一行下margin失效问题 在IE6下,一行元素的宽度之和 和 父级的宽度相差大于等于3,则最后一行元素的下margin失效
(解决办法: 无(所以需要考虑IE6兼容性写样式时尽量不要用下margin,可以用给父级加下padding的方法代替)

14.在IE6下元素内容被复制的问题 在IE6下元素的宽度和父级宽度相差小于3px,并且两个浮动之后之间有注释或者内嵌,元素内容会被复制
(解决方法:可以用div把注释或者内嵌元素包起来)

15.在IE6中li里的内容浮动了之后li下边产生间隙的问题 在IE6中,li本身没有加浮动,但是 li 的内容都浮动了,或者有两个以上的浮动,li的下边就会产生几个px的间隙
(解决方法: 1 给li 加浮动 2给li 加vertical-align:top)

16.在IE6下绝对定位元素消失掉的问题(在IE6下,浮动元素和绝对定位元素是同级关系并且浮动元素的占位宽度和父级小于3px,绝对定位元素会消失掉)
(解决方法: 把绝对定位元素单独包起来)

17.在IE6下,父级的宽高是奇数的话,元素的right值和bottom值会有1px的偏差
(解决办法:无)

18.在IE6,7下,子元素如果有相对定位的话,父级的overflow包不住它
(解决方法: 给父级也加相对定位)

19.IE8和IE8之前浏览器不支持opacity的问题
(解决方法:filter:alpha(opacity= 40 ) filter是IE特有的属性,在IE8及之前的版本才会被识别)

20.在IE6,7下不支持border-spacing这条样式
(解决方法:1. border-collapse:collapse(会合并边框)2.cellspacing(行间样式,不会合并边框)

21.在IE6,7下input上下各有1px的间隙
(解决方法: 给input加浮动)

22.在IE6下,输入类型表单控件上下各有1px的间隙
(解决方法:给控件加浮动)

23.在IE6下,输入类型表单控件border:none;无效
(解决方法:1. border=“0” 2 重置input的背景)

24.在IE6,7下,输入类型的表单控件,输入文字的时候,图片会随着文字一起移动
(解决方法: 把图片给父级)

25.在IE6、7下,首行缩进可控制元素 text-indent会影响input等元素的位置
(解决方法:用padding-left来控制距离)

26.在IE6下,只支持link,hover,visited,active这四个伪类,并且只支持添加给a标签;

27.在IE7下,只支持link,hover,visited,active这四个伪类,可以添加给其它标签;

原文地址:https://www.cnblogs.com/Tohold/p/10209788.html

时间: 2024-10-10 01:04:09

超全的IE兼容性问题及解决方案的相关文章

100+ 超全的web开发工具和资源

转载出处:https://xituqu.com/170.html 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助

[WinForm] VS2010发布、打包安装程序(超全超详细)

1. 在vs2010 选择"新建项目"→" 其他项目类型"→" Visual Studio Installer→"安装项目": 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1."应用程序文件夹"表示要安装的应用程序需要添加的文件: 2."用户的'程序'菜单"表示:应用程序安装完,用户的"开始菜单"中的显示的内容,一般在这个文件夹中,需要再创建一个文件用来存放

一个全终端的消息推送解决方案

全终端消息推送解决方案 项目介绍 这是一个全终端的消息推送解决方案,实现类似微博的消息发布模式,用户可在移动端,网页端或是PC端发布消息,相应的,其他用户可在上述平台上接收并查看这个用户发送的消息.预计实现基础的注册,登录验证以及发布消息与接收消息功能. 竞争性需求分析框架 N--need,需求 该项目主要面向中小企业开发,大多数小型公司或团队内部交流和资料共享都在使用一些大众化的社交工具,由于这些工具都是面向普通用户开发,在保密要求上完全不能满足需求,通过转发和截屏就能轻松的将内部资料泄露到外

[转帖]一文读懂分布式架构知识体系(内含超全核心知识大图)

一文读懂分布式架构知识体系(内含超全核心知识大图) https://yq.aliyun.com/articles/721007?spm=a2c4e.11153959.0.0.2f464977X7lSdH 作者 | 晓土  阿里巴巴高级工程师 姊妹篇阅读推荐:<云原生时代,分布式系统设计必备知识图谱(内含22个知识点)> 导读:本文力求从分布式基础理论.架构设计模式.工程应用.部署运维.业界方案这几大方面,介绍基于 MSA(微服务架构)的分布式知识体系大纲,从而对 SOA 到 MSA 进化有着立

常见浏览器兼容性问题与解决方案【转】

常见浏览器兼容性问题与解决方案 原文:http://blog.csdn.net/chuyuqing/article/details/37561313/ 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按

CSS 多浏览器兼容性问题及解决方案

css的兼容性也是大家关注的热点.大家一定要注意多测试. Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-

超全!整理常用的iOS第三方资源

超全!整理常用的iOS第三方资源 一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://github.com/jdg/MBProgressHUD 3:XML/HTML解析 地址:https://github.com/topfunky/hpple 4:有文字输入时,能根据键盘是否弹出来调整自身显示内容的位置 地址:https://github.com/michaelt

超全超详细的HTTP状态码大全

超全超详细的HTTP状态码大全 本部分余下的内容会详细地介绍 HTTP 1.1中的状态码.这些状态码被分为五大类: 100-199 用于指定客户端应相应的某些动作. 200-299 用于表示请求成功. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息. 400-499 用于指出客户端的错误. 500-599 用于支持服务器错误. 一些常见的状态代码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务器暂时不可用 以下提供了 HTTP 状

超全面的.NET GDI+图形图像编程教程

本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了分享给大家,纯手工码了好几天的字,喜欢的表忘了点赞哦~给点小小的动力~ 目录: <GDI+绘图基础> 1 GDI+概述 2 Graphics类 2.1 Graphics类的方法成员 2.2 引用命名空间 3 常用画图对象 3.1 Pen类 3.2 Color结构 3.3 Font类 3.4 Bru