pc兼容问题处理

代码兼容：IE7及以上，360浏览器，搜狗浏览器，谷歌，火狐，欧朋等等。

一．需要注意的地方：

1.写好标准头：

2.首先引入初始化css,保证消除不同浏览器的细微差别。

  

具体内容：

*{margin:0;padding:0;}

body{font-size:12px;line-height:25px;font-family:Arial,Helvetica,"Microsoft YaHei","SimSun",sans-serif;color:#606060;background:#f6f6f6;padding:0;margin:0;position:relative;text-align:justify;text-justify:newspaper;}

img{border:none;}

a{outline:none;}

a:link{text-decoration:none;color:#606060;}

a:visited{text-decoration:none;color:#606060;}

a:hover{text-decoration:underline;color:#ff5600;}

input{margin:0;padding:0;outline:none;background:#fff;font-size:12px;color:#606060;border:1px solid #ddd;}

input[type='submit'], input[type='reset'],input[type='button'],button{cursor:pointer;border:none;-webkit-appearance:none;}

textarea{outline:none;resize:none;font-size:12px;border:1px solid #ddd;}

ul, ol, li{list-style-type:none;}

.clr{display:block;clear:both;}

.clearfix{display:block;content:"";clear:both;overflow:hidden;}

3.PC端 H5新标签尽量不用，比如header,footer,nav。

4.CSS选择器 nth-of-type不使用。

二．针对IE低版本浏览器及其他

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

（1）前缀

当一些CSS3样式语法还存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有：

    Trident内核：主要代表为IE浏览器

    Gecko内核：主要代表为Firefox

    Presto内核：主要代表为Opera

    Webkit内核：产要代表为Chrome和Safari

而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

Trident内核：前缀为-ms

Gecko内核：前缀为-moz

Presto内核：前缀为-o

Webkit内核：前缀为-webkit

例如：

.box{

-webkit-transform:rotateY(0deg);

-moz-transform:rotateY(0deg);

-ms-transform:rotateY(0deg);

-o-transform:rotateY(0deg);

transform:rotateY(0deg);

}

（2）css hack

1.IE6：_

2.IE6/7：*

3.IE7/Firefox：!important

4.IE7：*+

5.IE6/7/8：\9

6.IE8：\0

例如：

.hack{  

/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/

     /* All browsers */  

    background-color:blue !important;/* All browsers but IE6 */  

    * /* IE6, IE7 */  

    +background-color:yellow;/* IE6, IE7*/  

     /* IE6, IE7, IE8, IE9, IE10 */  

    background-color:purple\0; /* IE8, IE9, IE10 */  

    /*IE9, IE10*/  

    _background-color:green; /* Only works in IE6 */  

}  

（3）条件hack

1.IE7以下版本：

2.IE7：

3.IE8：

4.IE8以上：

360浏览器：

360浏览器使用兼容模式打开

在head里加上：

 

 

三．具体方法

1.背景透明问题

IE: filter: alpha(opacity=10);

FF: opacity:0.6;

FF: -moz-opacity:0.10;

.box{filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;}

2.不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

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

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

3.设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度

问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

4.图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

5.IE浮动 margin产生的双倍距离

#box {

float:left;

width:100px;

margin:0 0 0 100px; //这种情况之下IE会产生200px的距离

display:inline; //使浮动忽略

}

6.文字阴影（CSS3）

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

7.Box阴影(CSS3)

.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }

8.Margin不一致的问题：

当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display：inline”项即可。

.如果图片加a标签在IE9-中会有边框 

解决方案:

img{border:none;}

2.rgba不支持IE8

解决方案:可以用 opacity

 eg:

opacity:0.7;/*FF chrome safari opera*/ filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/

但是,需要注意的是,opacity会影响里面元素的透明度

3. display:inline-block ie6/7不支持

解决方案:

display:inline-block;*display:inline;

4.默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍  如果处于无声明状态那么所有的ie浏览器margin-top加倍

解决方案:用css给body添加magin属性为0px

body{margin:0;}

5.IE 6.0 Firefox Opera等是 真实宽度=width+padding+border

IE5.X 真实宽度=width

解决方案:

方法1. 

div.content { width:400px; //这个是错误的width(对于ie5来说是正确的),所有浏览器都读到了 voice-family: "/"}/""; //IE5.X/win忽略了"/"}/""后的内容 voice-family:inherit; width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的 }

方法2. 

div.content { width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值 width(空格)/**/:400px;//IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用 }

6.height不能小于16px,设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

解决方案:overflow设置为hidden

7.min-height不兼容  ie6 7解释为超过高度就撑开,而其他版本浏览器则遮盖下面的层

解决方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

8.position:fixed  IE5、6无法识别此属性

解决方案:

9.浮动的div有margin_left属性ie6会加倍  无论兼容视图还是无声明视图 

解决方案:

方案一: IE6唯一识别属性_的方式加_display属性_display:inline;

方案二:

条件注释-->

.on{ display:inline }

10.cursor兼容  自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本

解决方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

11.png图片  IE6里面的png图片不能透明 兼容版本和无声明版本都是 

解决方案:

12.img浮动  img标签打回车会造成每个图片之间有缝隙

解决方案:可以删除之间的回车键也可以让这些图片浮动

13.在IE浏览器下 input type="text"文本框点击时后面会出现"X",以及type="password"后面会出现眼睛,如何除去这两种默认样式:

::-ms-clear,::-ms-reveal{display:none;}

注:IE9-不识别

14.CSS3前缀  -webkit-  webkit渲染引擎  chrome/safari

  -moz-   gecko渲染引擎   firefox

  -ms-    trident渲染引擎  IE

  -o-   opeck渲染引擎 opera

动画、过渡、background-size 都需要加前缀

eg: 动画

@-webkit-keyframes name{ 0%{动画开始的css样式;} 100%{动画结束的css样式;} }-webkit-animation:name 8s infinite linear;

过渡:

div.box{ bottom:-40px;

-webkit-transition:all .3s ease-in-out 0s;}

注:但是过渡不兼容IE8-,可以用JS动画实现

background-size 同样也不支持IE8,可以考虑用img

15.渐变

解决方案:

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/background: -ms-linear-gradient(top, #35FEA1, #6E9DFF);/* IE 10 */ background:-moz-linear-gradient(top, #35FEA1, #6E9DFF); /*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/ background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF);/*Safari5.1 Chrome 10+*/ background: -o-linear-gradient(top, #35FEA1, #6E9DFF);/*Opera 11.10+*/

16.PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变

(1) 圆角 border-radius

.signBtn{ height: 40px; background-color:#08BCD2; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;behavior: url(css/PIE.htc);}

(2)阴影 box-shadow

.box{ width:200px; height:200px; -webkit-box-shadow:1px 0 10px; -moz-box-shadow:1px 0 10px; box-shadow: 1px 0 10px; background-color: #fff; behavior: url(css/PIE.htc);/*IE边框阴影*/}

(3)背景透明rgba

.box{ background-color:rgba(12, 154, 171, 0.29); behavior: url(css/PIE.htc); -pie-background:rgba(12, 154, 171, 0.29);}

(4)渐变

.box{ width:200px; height:400px; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393)); background:-moz-linear-gradient(#9F9, #393); -pie-background:linear-gradient(#9F9, #393); behavior:url(pie.htc); }

注:PIE.htc文件路径相对是相对于css文件,并非html文件,以上例子是将PIE.htc文件放在与css样式文件同一个文件夹css内,而对应的html问价与css文件夹同级

17.JS实现点击跳转到指定位置

$(".arraw-bt").click(function(){ var scroll_offset = $("#section").offset(); console.log(scroll_offset); $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持 "scrollTop":scroll_offset.top },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果 /});