码迷,mamicode.com
首页 > 其他好文 > 详细

pc端不同浏览器兼容性问题及解决方案

时间:2017-03-25 15:21:34      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:否则   out   圆角背景   ora   site   ie7   border   gecko   splay   

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

一.需要注意的地方:

1.写好标准头<!DOCTYPE html>

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

  <link rel="stylesheet" href="css/style.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以下版本:<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->

2.IE7:<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->

3.IE8:<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]-->

4.IE8以上:<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

 

360浏览器:

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

head里加上:

 <meta name=‘renderer‘content=‘webkit|ie-comp|ie-stand‘ />

 <meta http-equiv="X-UA-Compatible" content="IE=IE7,chrome=1">

三.具体方法

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”项即可。

 

pc端不同浏览器兼容性问题及解决方案

标签:否则   out   圆角背景   ora   site   ie7   border   gecko   splay   

原文地址:http://www.cnblogs.com/chenlq/p/6617174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!