经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

这里是修真院前端小课堂，本篇分析的主题是

【经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？】

大家好，我是IT修真院武汉分院第10期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网css任务15，深度思考中的知识点——经常遇到的浏览器兼容性有哪些？原因，解决方法是什么，常用的hack技巧

一.背景介绍

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是我们web前端开发人员经常会碰到和必须要解决的问题.

二.知识剖析

解决浏览器兼容的主要方法是css hack 那么到底什么是css hack呢？

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

三.常见问题

3.1 默认的内外边距不同

解决方法一.直接用*{margin:0;padding:0;}

扫描二维码关注公众号，回复： 5636017 查看本文章

方法二.单独清除需要清除的元素比如 body, h1, h2, h3, h4, h5, h6, p, 　列表元素 dl, dt, dd, ul, ol, li 表单元素 form, fieldset,legend, button, input, textarea 等等

3.2块元素中含有图片时，ie6-7中会出现图片下有空隙

解决方法

1、在源代码中让div和img在同一行

2、将图片转换为块级对象display:block;

3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom

4、设置图片的浮动属性 float:left;

3.3 ul和ol列表缩进问题

在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；

在 Firefox Chrome中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终

四.解决方案

刚才我们用的都是比较通用的做法那么用hack方法呢？

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： IE浏览器显示的内容，针对IE6及以下版本：只在IE6-显示的内容。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

background-color:orange;/* all - for Firefox/Chrome */

background-color:red\0;/* ie 8*/

background-color:blue\9\0;/* ie 9/10 */

*background-color:black;/* ie 6/ ie 7 */

_background-color:green;/* ie 6 */

五.编码实战

六.拓展思考

还有其他的hack技巧吗吗？

关于手形光标. cursor: pointer. 而hand 只适用于 IE.

若需给 a 标签内内容加上样式, 需要设置 display: block;

七.参考文献

css hackhttps://www.bbsmax.com/A/kvJ3eY3Odg/

关于浏览器兼容及hackhttps://www.bbsmax.com/A/n2d9Djno5D/

八.更多讨论

大家平时遇到过哪些兼容性问题呢？

PPT

浏览器常见的兼容性有哪些？_腾讯视频

作者：寡人yu
链接：https://www.jianshu.com/p/daca036e80a9
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处

【更多内容，可以加入IT交流群565734203与大家一起讨论交流】

【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】