css兼容性处理

来源：互联网发布：mac pro 常用快捷键编辑：程序博客网时间：2024/05/22 16:16

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

在解决兼容性问题前应该要知道什么标签属性引起什么问题，方可对症下药。所谓的知其然还要知其所以然，问题就会迎刃而解、事半功倍。

浏览器兼容问题的起因及解决办法

一：不同浏览器的标签默认的外补丁和内补丁不同（各自的margin 和padding差异较大）。

解决方案：CSS里 *{margin:0;padding:0;}

二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

浮动的工作原理

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素引起的问题：

1) 父元素的高度无法被撑开，影响与父元素同级的元素。

2) 与浮动元素同级的非浮动元素会跟随其后。

3) 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的几种方法：

1) 额外标签法（空标签）。使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决2、3问题。

　　注意：clear属性只适用于块级元素。　

缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

2) 使用after伪元素清除浮动。对于问题1，添加如下样式，给父元素添加clearfix样式：

　　注意：该方法只适用于非IE浏览器。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

具体看after伪元素详解

after伪类介绍

css伪类基础介绍

<span style="font-size:14px;">.clearfix:after {     content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden;}.clearfix {    display: inline-block;} /* for IE/Mac */</span>

3) 浮动外部元素。

4) 设置 overflow 为 hidden 或者 auto清除浮动。

　　说明：给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

CSS浏览器兼容解决总结如下
1. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义：

!important可被FireFox和IE7识别；

*可被IE6、IE7识别；

_ 可被IE6识别；

*+ 可被IE7识别。

区别IE6与FF： background:orange;*background:blue;
区别IE6与IE7： background:green !important;background:blue;
区别IE7与FF： background:orange; *background:green;
区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue;
IE7,IE8兼容: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

最新兼容方案如下：

.e{
   color:#FFF;     /* FF,OP */
   [;color:#0F0;] /* Sa,CH */
   color:#FFF\9; /*IE6、7、8*/
   *color:#FF0;    /* IE7、6 */
   _color:#F00;    /* IE6 */
}

2. 应用条件注释,因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。
比如：
<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。

注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。

3. FireFox无法解析简写的padding属性设置，如padding: 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

4. 消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效

5. CSS控制透明：1),IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);2),IE：filter:alpha(opacity=60)

FireFox：opacity:0.6;

6. CSS控制圆角：IE：不支持圆角； FireFox: -moz-border-radius:4px;或 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;

7. CSS双线凹凸边框：IE：border:2px outset; FireFox： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white;

-moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080;

(---未整理完成)

8. 鼠标滚动onScroll事件的兼容处理

var scroll=document.documentElement.scrollTop||document.body.scrollTop;

9. FireFox不支持display的inline和block

10. FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行 (待验证)

11. FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中（文字...）

12. 对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即 <style type="text/css">  </style> 这样可以避免一些访问过后的超链接就不具备hover和active样式了。

13. IE6下图片下方会有空隙解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

14. IE6下两个层中间有空隙解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;

15. 对齐文本与文本输入框，须在CSS中增加vertical-align:middle;

16. 支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义： { height:auto!important; height:200px; min-height:200px; }

17. IE6由于默认行高问题无法定义1px左右高度的容器，解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px

18. IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px

19. IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px

0 0