前端兼容性问题整理

1. 首先大致了解下现在前端各浏览器份额及相关的信息。

   据统计，chrome已经取代ie占据半壁江山，ie8、ie9占有接近25%的份额，紧跟着是firefox

2. 浏览器内核

   Chromium内核，以Chrome为代表
   Gecko内核，以Firefox为代表
   Webkit内核，以Sarfari为代表
   Trident内核，以IE为代表
   Presto内核，以老版本的Opera为代表
   

   此篇文章只关注ie8+版本和其他现代浏览器(默认为最新版本)的兼容性问题

一.选择器兼容

1. id、类、标签、通配、群组(A,B)、后代选择器所有浏览器版本均兼容 2. E>F、E+F、E~TF ie7+及其他现代浏览器支持 3. 伪类选择器 ：link ：visited ：hover ：active ie7+支持

focus ie8+支持
注意:ie6下只有带href的a链接才能触发hover
4. 伪元素选择器
：first-letter 选取文本块的第一个字母
：first-line 选取文本块的第一行
它两全浏览器支持
：before、：after ie8+支持
::selection 规定在选取浏览器中文本时的样式，只支持bgc和color两个属性值，ie9+支持，firefox必须加-moz前缀，注意这个必须是两个冒号，否则不起作用。
ie6，7不支持:before after的解决办法
据说引入一个jquery.pseudo.js 然后再样式里添加before指定值就行了
p:before,p{
content:”before content”,
before: “before content”,
}
P:before,p .before{
color:red;
}
但是，我没有试出来，先把方法留着，以后再验证
5. 属性选择器
E[attr] ,E[attr=val],E[attr*=val],E[attr^=val],E[attr$=val] ie7+支持
6. (6).结构伪类选择器
E:first-child , E:last-child , E:first-of-type , E:last-of-type
E:nth-child() , E:nth-of-type , nth-last-child , nth-last-of-type
E:only-child , E:only-of-type
E:empty
上述结构伪类选择器，除了first-child是ie7支持，其余的全是ie9+支持，是不是很神奇
7.状态伪类选择器
E:enabled E:disabled E:checked ie9+支持
8. 否定伪类选择器
:not(selector) ie9+支持
9.只读伪类选择器，常用语表单input元素
:read-only ie不支持 哈哈
10.:required ie10+支持

---

二. css兼容性整理

1. border-radius
   定义圆角边框效果，兼容性ie9+支持，部分chrome和firefox需要加上浏览器前缀。针对ie6-8浏览器，可以引入ie-css3.htc文件实现圆角边框效果。例：

   {
   border-radius: 10px;
   behavior: url(ie-css3.htc);
   }

2. box-shadow
   定义阴影效果，兼容性ie9+支持，部分chrome和firefox需要加上浏览器前缀。针对ie6-8浏览器，可以引入ie-css3.htc文件实现阴影效果。
   注意：ie6-8只支持黑色阴影，设置四周环绕的阴影时x偏移距离和y偏移距离必须书写为0px 0px不能直接写为0 0 。

3. text-shadow
   为文本添加阴影效果。ie10+支持

4. background-size
   ie9+支持。可以通过引入background.mini.htc支持低版本浏览器实现效果。

5. user-select
   值为none时规定用户不能选择浏览器中呈现的文本，ie10+及现代浏览器支持(需要浏览器前缀)，ie6-9可以通过在标签内添加onselectstart=“return false；”来禁止用户选择文本，低版本的opera可以在标签内添加unselectable=‘on’禁止文本选择

6. pointer-events
   当值为none时，元素不再响应鼠标的任何交互效果，包括鼠标移入移出、单击双击等。
   ie11+支持

7. ie6下的双边距问题
   在ie6下,如果该盒子是默认的块级元素(div、p、h1\h2等)靠近浏览器的左边框或右边框(没有靠近边框的盒子浮动后的外边距表现正常)，并且盒子浮动在靠近边框的方向上有外边距，那么会显示为双倍边距。如果是span、a这一类行内元素靠近浏览器窗口左右边框并且浮动有对应边距，则显示正常。
   解决办法，盒子使用行内元素，或者为出现bug的盒子修改display为inline(必须是inline,inline-block都不行)

8. ie6下空盒子默认12px的高度bug
   在ie6下，一个空的div即使里面什么都没有，也会具有12px的高度，甚至与显示设置的高度小于12px时，盒子的高度都会被解析为12px。
   解决办法:font-size设为0，并且添加overflow:hidden

9. ie6下左浮动元素设置margin-bottom无效(没有测试到丫，先记录下来再说)
   解决办法:显示设置浮动元素的高度，或者用父元素的padding-bottom替代浮动元素的margin-bottom
   10.div里放一张图片的时候，div下部会多出一点空白
   
   所有浏览器都有这个问题，原因是图片是行内元素默认的对齐方式是baseline基线对齐，所以下面会留出一小截文字的空白。
   解决办法：为图片设置display:block或者设置图片vertical-align:bottom;

10. ie6下父盒子显示设置了高度，但是如果子盒子的高度超过了父盒子，父盒子会被子盒子撑开。
    解决办法：为父盒子设置overflow:hidden

11. 上面那个问题引申出来的问题
    如果上述的子盒子设置了浮动，并且高度超过父盒子，那么超出来的部分会影响后面元素的布局。
    解决办法：同样是设置overflow:hidden
    例如：
    

    这是加了overflow:hidden的表现
    
    这是不加的情况，可以看见占用了下面img的空间，img被迫右移。

12. 同10的情况，如果子盒子设置了position属性，那么父盒子的overflow会失效(并没有把父盒子撑开，但是本应该隐藏的内容显示了出来)
    
    解决办法：给父盒子也加上position属性

13. 当一个盒子里有一个行内元素和一个右浮动的元素时，ie7及以下版本，右浮动的元素会另起一行右浮动
    例如：

<div class="box clearfix border oh" style="height: 100px">
        <span class="border">dddddddddddddddd</span>
        <div class="fr border d3"></div>
</div>

在ie8+及现代浏览器，子div是和span一样靠着父盒子的上边缘的。但是ie7以下子div另起一行浮动了。
解决办法：把子div和span的书写位置换以下，右浮动的写在前面

1. ie6下，如果父盒子内有一个浮动和一个绝对定位的子盒子，如果浮动的子盒子宽度太接近父盒子的宽度，那么绝对定位那个盒子会消失不见。
   解决办法:调整浮动子盒子的宽度直到绝对定位盒子可以正常显示，或者在浮动和绝对定位子盒子之间加一个空的div也可以解决

2. 3像素间距bug
   在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。
   解决办法：为浮动元素添加 _margin-right:-3px (一定要有下划线，只有ie6能识别这个样式)

3. hover
   ie6下只有具有href的a元素才能触发hover，其他元素都不能触发hover，所以尽量避免在hover触发里执行一些重要的操作。
   解决办法：引入csshover.htc文件，然后再需要hover样式的元素样式里添加
   behavior：url(csshover.htc).
   或者用juqery监听鼠标移入移出动作动态添加样式

4. ie6-7下不识别inline-block的问题
   添加如下样式{display:inline-block;*display:inline;*zoom:1}

5. 接上面的问题，通过上面的步骤可以让ie 6-7支持inline-block并且宽高padding属性均正常，但是，又出现了新的问题，如果设定了display：inline-block元素通过设定height或者padding拥了了比正常行内元素要高的高度，那么当这个inline-block元素周围有其他行内元素时，行内元素的位置会异常！

<span class="border d6">我是行内元素</span>
<a class="d7">我是行内块元素，嘻嘻</a>
<span class="border d6">我也是行内元素</span>

如上述结构，a设置为display：inline-block，在ie8+及现代浏览器表现如下：

但是在ie6、7下的效果：

可以看到两个span跑到下面去了。原因不明，解决方法是为两个span添加vertical-align:top

1. ie6下png图片透明部分无法正常显示透明的效果
   使用jquery的一个插件

<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.pngFix.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
       $(document).pngFix();
});
</script>

那一段代码是必须的，否则不生效