浏览器兼容性总结，【不定期更新】

1. ie6及以下不支持子代选择器：
比如只匹配div下的子代标签而不是所有后代标签。
div>a{……}；
ie7以下版本是不支持的。

解决办法：还是老老实实给个class吧，别偷懒了。

2. 父级div下面存在2列高度不一样的子代div时，父级div高度无法自适应。此时父级div容器不成矩形，而呈现不规则。




解决办法如图片所示。
3. 当父代div下放置多个子代div，切子代与父代宽度相同时，子代div容器会出现重叠现象。

解决办法：给子代div全部加上float：left;属性即可解决问题。

 

4. ie6中，当使用空标签时，此标签的高宽会受默认字体干扰。

比如使用空白<li>标签做轮播按钮时，设置较小的高宽会不起作用，这是因为受到了ie6最小默认字体干扰，可能是14px或者其他。

解决办法：给此标签加上font-size：0；

 

5.标签层级一定要分清楚，比如当有序列表<ol>的子标签<li>外层嵌套<a>标签时，ie几乎所有版本浏览器(包括IE11)序列号都无法正常显示（全部为1）.

解决办法： 正确嵌套标签，比如把<a>标签放在<li>标签内，这其实不算bug，充其量是ie太死板。

 

6.当发生换行时，要注意一区分是内联元素还是块级元素。

块级元素只要不浮动，是默认换行的；当父容器宽度不够时内联元素也会换行，这种情况下，行间距在chrome和ie表现一致，火狐不一致。

图标是块元素，文字是<a>标签即内联元素，圆点是块元素。在火狐下是这样的

 

而在ie和chrome下是这样的：

解决办法：

让文字变成块元素。即display:block; 

 

7.当需要定义cursor的url属性时，使用相对路径，chrome，FF正常，IE会失效

解决办法：使用绝对路径。

 

8.vertical-align属性，国产浏览器比如360、遨游都不支持数字值,支持top、middle、bottom.

 

  

 

转载于:https://www.cnblogs.com/flappyCoder/p/3603328.html