css中的一些兼容问题

浏览器兼容  

为什么会有兼容问题?

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

使用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

上一篇:自制 Word、Excel 批转 PDF 工具


下一篇:iOS多线程技术方案