浏览器兼容问题
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。
不同浏览器的标签默认的外补丁和内补丁不同（即默认的margin和padding不同）
解决方法：
1、在css中统一定义“*”（代表所有标签）
* {margin：0；padding：0；}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
2、Normalize.css
Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML元素，排版，列表，嵌入的内容，表单和表格都进行了一般化。
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
html5shiv.js
解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->
respond.js
用于解决 IE6-8 (IE9以下）以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
<!--[if it IE 9]>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
picturefill.js
解决 IE 9、10、11 等浏览器不支持<picture> 标签的问题
<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>
在使用<picture>之前，应当在<head>里引用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
<a>标签的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：
.div1{ margin:10px;}
.div2{ margin:20px;}
html:
<div class=”div1”>一号元素</div>
<div class=”div2”>二号元素</div>你可能会以为两个div之间的距离是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
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
扫一扫
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
