浏览器兼容　　

为什么会有兼容问题？

　　由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。现在市面上使用较多的内核例如：

使用Trident内核的浏览器：IE、Maxthon、TT；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；
使用Presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari、Chrome。

主要的兼容问题也是出在IE浏览器和其它流行的浏览器之间的问题，对于IE浏览器本身而已，每个版本跨度都有差别，IE8以上和IE8以下都存在很多兼容的问题。

在前端的工作中解决浏览器兼容问题是我们必须掌握的一项技能。

　　对浏览器兼容问题，可以总结为HTML，Javascript兼容，CSS兼容。 其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。特别是HTML5增加了许多新标签，低版本浏览器有点影响时代进步啊。

　　css是一个难点，css兼容问题是主要的浏览器兼容问题，解决css兼容问题是至关重要的。

　　这里就简单介绍一些css兼容问题和解决方法。

　　1.css hake技术，对兼容问题了解不深时，常常采用的方法。

　　　　1、区别IE6,IE7,IE8,FF

　　　 【区别符号】：「\9」、「*」、「_」

　　　　2、区别IE6、IE7、Firefox(方法1)

　　　　【区别符号】：「*」、「_」

　　　　3、区别IE6、IE7、Firefox(方法2)

　　　　【区别符号】：「*」、「!important」

　　　　4、区别IE6、IE7(方法1)

　　　　【区别符号】：「*」、「_」

　　　　5、区别IE6、IE7(方法2)

　　　　【区别符号】：「!important」

　　2.条件注释法　　　

　　<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]--> 
　　<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]--> 
　　<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]--> 
　　<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]--> 
　　<!--在 IE6及IE6以下版本中加载css--> 
　　<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]--> 
　　缺点是在IE浏览器下可能会增加额外的HTTP请求数。

　　3.一些常见的兼容性问题bug　　　

1、IE6怪异解析之padding与border算入宽高 
原因：未加文档声明造成非盒模型解析 
解决方法：加入文档声明<!doctype html>

2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距） 
解决方法：display:inline

3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。 
1）字体大小为奇数之边框高度少1px 
解决方法：字体大小设置为偶数或line-height为偶数 
2）line-height，文本垂直居中差1px 
解决方法：padding-top代替line-height居中，或line-height加1或减1 
3）与父标签的宽度的奇偶不同的居中造成1px的偏离 
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度

4、内部盒模型超出父级时，父级被撑大 
解决方法：父标签使用overflow:hidden

5、line-height默认行高bug 
解决方法：line-height设值

6、行标签之间会有一小段空白 
解决方法：float或结构并排(可读性差，不建议)

7、标签高度无法小于19px 
解决方法：overflow: hidden;

8、左浮元素margin-bottom失效 
解决方法：显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签 
margin- bottom，即(margin-bottom与float不同时作用于一个标签)

9、img于块元素中，底边多出空白 
解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

10、li之间会有间距 
解决方法：float: left;

11、块元素中有文字及右浮动的行元素，行元素换行 
解决方法：将行元素置于块元素内的文字前

12、position下的left，bottom错位 
解决方法：为父级(relative层)设置宽高或添加*zoom:1

13、子级中有设置position，则父级overflow失效 
解决方法：为父级设置position:relative

14、 IE6下图片下方有空隙产生；解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block，
或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.（但是最近我发现这个问题在其它浏览器中也有所体现）

15、IE6 3px bug 两个浮动层中间有间隙，这个IE的3PX BUG也是经常出现的,
解决的办法是给右边元素也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
经典两列布局，float: left;width:200px; 第二个，margin-left,200px; 他们之间会产生3px的间距。

16、 在IE6中没有min-width的概念，其默认width就是min-width，所以有时字体过多它会选择撑开容器。

17、 IE6无法定义1px左右高度的容器，是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px ⑦ 使用margin ： 0 auto；方法使容器居中依然在IE6中行不通，我们要对其父容器使用

18、被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题, 解决方法是改变CSS属性的排列顺序: L-V-H-A <style type=”text/css”> a:link {} a:visited {} a:hover {} a:active {} /style>

19、 在使用绝对定位/相对定位时，设置z-index在ie中可能会失效，是因为其元素依赖于其父元素的z-index，而父元素默认为0 ？所以子元素z-index高，而父元素底，依然不会改变其显示顺序；

　　　　　　文章来自http://www.cnblogs.com/hexi1/p/4580192.html

css中的一些兼容问题的更多相关文章

  1. CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...

  2. CSS中RGBA的兼容方法以及透明度计算方法

    CSS对IE使用背景透明 实现 rgba 效果 height:35px; background: -webkit-gradient(linear,left top,left bottom,from(r ...

  3. CSS中兼容的一面-----Hack

    国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 1 ...

  4. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  6. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  7. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  8. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  9. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

随机推荐

  1. 【转】ADO.NET中的五个主要对象

    Connection 物件    Connection 对象主要是开启程序和数据库之间的连结.没有利用连结对象将数据库打开,是无法从数据库中取得数据的.这个物件在ADO.NET 的最底层,我们可以自己 ...

  2. Callable接口、Runable接口、Future接口

    1. Callable与Runable区别 Java从发布的第一个版本开始就可以很方便地编写多线程的应用程序,并在设计中引入异步处理.Thread类.Runnable接口和Java内存管理模型使得多线 ...

  3. matlab坐标外围背景变白色

    set(gcf,'Color',[1,1,1]) 默认图片是这样的: 出图之前使用命令,外围变白后效果如下:

  4. Swift3.0语言教程查找字符集和子字符串

    Swift3.0语言教程查找字符集和子字符串 Swift3.0语言教程查找字符集和子字符串,在字符串中当字符内容很多时,我们就需要使用到查找字符集或者子字符串的方法.以下我们将讲解3种查找字符集和子字 ...

  5. 20145223《Java程序程序设计》第8周学习总结

    20145223 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 ·NIO使用频道(Channel)来衔接数据节点,在处理数据时,NIO可以让你设定缓冲区 ...

  6. 块级元素和内联元素的区别（HTML）

    请把下面二行代码放进body标签里:     <div style=”border: 1px solid red;”>div1</div>     <div style= ...

  7. 矩阵快速幂 ZOJ 3497 Mistwald

    题目传送门 题意:看似给了一个迷宫,每个点能传送到4个地方,问在P时间能否到达终点 分析:其实是一个有向图,可以用邻接矩阵存图,连乘P次看是否能从1到n*m,和floyd的传递背包思想一样 #incl ...

  8. 贪心 Codeforces Round #289 (Div. 2, ACM ICPC Rules) B. Painting Pebbles

    题目传送门 /* 题意:有 n 个piles,第 i 个 piles有 ai 个pebbles,用 k 种颜色去填充所有存在的pebbles, 使得任意两个piles,用颜色c填充的pebbles数量 ...

  9. HDU5823 : color II

    每种颜色的点集肯定是独立集,因此可以通过$O(2^n)$枚举每个集合判断出每个集合是否只需要一种颜色即可染色. 设$f[i][S]$表示$i$种颜色覆盖$S$这个集合的方案数,假定两个集合可以相交,那 ...

  10. BZOJ4107 : [Wf2015]Asteroids

    首先将速度相减,变成A在动而B不动,若速度为0则显然永远不会相交. 枚举A的每个点以及B的每条线段,计算这三个点共线的时刻. 将时刻排序,对于每个区间进行三分,用半平面交计算相交面积. 注意特判相交面 ...