浏览器兼容问题

兼容问题

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的，都应该是统一的显示效果。

不同浏览器的标签默认的外补丁和内补丁不同（即默认的margin和padding不同）

解决方法：

1、在css中统一定义“*”（代表所有标签）

* {margin：0；padding：0；}

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

2、normalize.css

normalize.css只是一个很小的css文件，但它在默认的html元素样式上提供了跨浏览器的高度一致性。normalize.css支持包括手机浏览器在内的超多浏览器，同时对html元素，排版，列表，嵌入的内容，表单和表格都进行了一般化。

html5shiv.js

解决ie9以下浏览器对html5新增标签不识别的问题。

respond.js

用于解决 ie6-8 (ie9以下）以及其它不支持 css3 media queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式

picturefill.js

解决ie 9、10、11等浏览器不支持标签的问题

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>

在使用之前，应当在里引用picturefill.js。

ie注释条件

ie注释条件仅针对ie浏览器，对其他浏览器无效

操作符	含义
lt	小于
gt	大于
lte	小于等于
gte	大于等于
！	不等于

ie 属性过滤器（较为常用的hack方法）

针对不同的 ie 浏览器，可以使用不同的字符来对特定的版本的 ie 浏览器进行样式控制

_：_color:red; 只有ie6可以识别

*：*color:red; ie6/7可以识别

\9：color:red\9; ie8及以下浏览器可以识别

浏览器css兼容前缀(某些css样式加前缀有效，某一些不行）

-o- ：//opera

-ms- ：//ie浏览器

-moz- ：//firefox

-webkit- ：//chrome

标签的css状态顺序

link:平常状态

visited：别访问过后的状态

hover：鼠标放在链接上时状态

active：链接被按下的时候

 

清楚浮动（最佳方式——伪类:after）

.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }

.clearfix { zoom: 1; }//只对ie浏览器起作用

 

ps:伪类(:)和伪元素(::)的区别:伪元素是css3定义的，伪类是在css2中定义的，使用两个冒号（::）是为了区分伪元素和伪类（其实没啥区别）。一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。为了兼容性，仍然使用了一个冒号的形式

 

margin上下边距重叠问题（对块状元素有影响，行内元素无影响，水平边距永远不会重合）

当相邻元素都设置了margin边距时，margin将取最大值，舍弃小值。

css：

.p1{ margin:10px;}

.p2{ margin:20px;}

html:

一号元素

二号元素

你可能会以为两个p之间的距离是30px，其实只有20px（取最大值），即发生了重叠。

解决方法：

1、为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 bfc：overflow: hidden;

2、给子元素设置css样式：display：inline-block；将其转为行内元素

 

ie6下设置float和margin属性，出现双倍边距的问题

块属性标签float后，又有横行的margin情况下（即拥有margin-left和margin-right的情况下），在ie6显示margin比设置的大，导致的情况是后面那一块在其他主流浏览器还是和浮动元素在同一行，而ie6浏览器下却被挤到了下一行

 

解决方法：为浮动元素的样式控制中加入”_display:inline;”将其转化为行内属性（行内元素无法设置其宽高）

”_display:inline;”/*ie6浏览器能识别，前面有描述到*/

 

解决ie9以下浏览器不能使用opacity问题

opacity：0.7;

filter:alpha(opacity = 70);

filter:progid:dximagetransform.microsoft.alpha(opacity=70);/*兼容ie8及以下*/

注意：标红的数字大小是相对应的。

 

解决ie6不支持min-height属性

浏览器窗口宽度减小到一定程度后就会出现下边的滚动条，网站宽度就不会再减小了，我们知道这一简单的功能用css的min-width就很容易能实现，但不幸的是，我们用户很多的ie6不支持这个非常方便的属性

方法一：

height:auto!important;

height:580px;

min-height:580px;

原理是使用ie6本身的bug(当块级元素内部的东西超出此块级元素的高度时，块级元素的高度会被撑开，也就是说ie6中的height属性本身就等同于min-height)。

方法二：使用hack方法

min-height:200px;

_height:200px;

ie7 ie8不支持css3 background-size属性的问题

方法一：

filter:progid:dximagetransform.microsoft.alphaimageloader(src='背景图片路径',sizingmethod='scale');

方法二：

-ms-behavior: url('css/backgroundsize.min.htc');

behavior: url('css/backgroundsize.min.htc');

 

图片高度超出设置显示的高度

描述：有时候我们想要显示图像的一部分，但在ie6中显示范围会超出设置的范围。原因是在ie6下，盒子的最小告诉为12-18px之间，只是为了方便加载文字因为文字的高度一般在12-18px之间，所以ie6一般默认显示宽度为12-18px，设置的宽度失效。

解决方案：设置font-size，但font-size的最小值为2px。这个时候需要用over-flow来进一步处理。其常用设定值为：hidden，scroll……

 

以下是一些常见属性的兼容情况

inline-block: >=ie8

min-width/min-height: >=ie7

:before,:after: >=ie8

p:hover: >=ie7

inline-block: >=ie8

background-size: >=ie9

圆角: >= ie9

阴影: >= ie9

动画/渐变: >= ie10