常见浏览器兼容性

首先需要指出的是,在现在即将面向2017的时间里,还在考虑ie兼容性问题的公司主要分两种,

1.互联网巨无霸企业,bat级别

2.政府相关部门和其他所有业务涉及传统行业的low逼公司(以及这些low逼公司养活的乱七八糟的外包公司)

本文只涉及css方面兼容性,个人建议遇到ie相关的原生js兼容性问题直接使用jquery,死磕ie的js相关问题没有任何前途。

一:hello

1.hack标识:

ie6:_  和星号

ie7:*

2.ie6/7 不支持部分

-- 不支持所有的css3属性,比如border-radius,透明边框

-- 不支持display:table,inline-block等属性;

-- 滤镜要这样写:filter:alpha(opacity=56);

-- 不支持 固定定位,要用js

-- IE6仅支持a标签的伪类,IE7支持所以元素的伪类,但是不支持表单的focus;

二:兼容性问题列表

1.块级元素浮动之后,横向的margin会变得更大 ie6,会导致一行中的内容被挤到下一行

解决:浮动之后加上宽高,在设定浮动的块级元素加上属性  display:inline

2.ie6/ie7 块级元素高度小于19px的时候,会比设置的值要大

解决:写font-size=1px,line-height小于设置的高度,overflow:hidden来解决

3.ie双边距:display:inline

4.ie子级盒模型超过父级时候,父级会被撑大

解决:父级标签overflow:hidden

解决2:父级相对定位,子级决定定位

5.ie6img于块元素中,底边多出空白

解决:父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

时间: 2024-08-02 23:08:47

常见浏览器兼容性的相关文章

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

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

从零开始学习前端开发 — 7、常见浏览器兼容性问题及图片整合技术

一.常见浏览器兼容性问题 1.双倍浮动bug 描述:块状元素设置了float后,又设置了横向的margin,在IE6下显示的margin值要比设置的值大 解决方案: 给float的元素添加display:inline;将其转换为行内元素 2.表单元素行高不一致 解决方案: 方案一: 给表单元素添加 vertical-align:middle; 方案二: 给表单元素添加 float:left; 3.IE6不识别高度小于10px的容器 解决方案: 方案一: 给元素设置 overflow:hidden

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

1 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 2 3 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 4 5 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这

常见浏览器兼容性问题与解决方式

所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发者常常会碰到和必需要解决的问题. 在学习浏览器兼容性之前,我想把前端开发者划分为两类: 第一类是精确依照设计图开发的前端开发者,能够说是精确到1px的,他们非常easy就会发现设计图的不足,而且在非常少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览

常见浏览器兼容性问题与解决方案css篇

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状

常见浏览器兼容性问题解析

最近刚做一个电子商务的项目,结果遇到很多兼容性的问题搞得我快要头昏脑涨,就去查了很多资料,所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.下面我就和大家分享一下一些常见的浏览器兼容性问题: 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标

初识-常见浏览器兼容性问题与解决方案

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状

css中常见浏览器兼容性问题

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示 margin比设置的大 问题症状:常见症状是I

Web前段开发人员须知的常见浏览器兼容性问题及解决技巧

为什么会有兼容性问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容. 使用Trident内核的浏览器:IE.Maxthon.TT: 使用Gecko内核的浏览器:Netcape6及以上版本.FireFox: 使用Presto内核的浏览器:Opera7及以上版本: 使用Webkit内核的浏览器:Safari.Chrome. 而我现在所说的兼容性问题,

常见浏览器兼容性问题

1.不同浏览器的标签默认的外补丁和内补丁不同 问题:不同浏览器的margin 和padding差异较大. 解决:CSS里    *{margin:0;padding:0;} 2.IE6的双边距bug 问题:浮动时,左右边距可能为所写值的2倍 解决:在float的标签样式控制中加入 display:inline; 3.高度小于10px是,在IE6,IE7中高度可能超出自己设置高度 问题:IE6.7超出自己设置的高度 解决:给超出高度的标签设置overflow:hidden 4.图片默认有间距 问题