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

 

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

【经常遇到的浏览器兼容性有哪些?原因,解决方法是什么,常用的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;}

方法二.单独清除需要清除的元素 比如 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技巧

 

五.编码实战

 

六.拓展思考

还有其他的hack技巧吗吗?

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

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

 

七.参考文献

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

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

 

八.更多讨论

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

PPT

 

 

 

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

上一篇:js 实现文字滚动功能,可更改配置参数 带完整版解析代码。


下一篇:7.3实战:创建一个让root都无法删除的文件