pc兼容

秒速五厘米 2022-02-04 08:45 254阅读 0赞

转自：[https://www.cnblogs.com/chenlq/p/6617174.html][https_www.cnblogs.com_chenlq_p_6617174.html]

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

**一．需要注意的地方：**

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

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.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以上：<html class="no-js">

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

[https_www.cnblogs.com_chenlq_p_6617174.html]: https://www.cnblogs.com/chenlq/p/6617174.html