发表于： 2017-01-21 23:38:08
1 1347
浏览器的兼容以及常用的hack技巧
1.背景介绍
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
2.知识剖析
主要从两点进行学习：如何跟踪兼容性问题以及hack技术
我自己的做法就是先在仇人吗上面开发测试，然后再到不同浏览器上面测试然后对于有些属性可以针对性的设置。其中几个主流浏览器的兼容写法：
ie9：-ms-属性：
firfox：-moz-属性：
safari和chorme：-webkit-属性：
Opera：-o-属性：
然后还有一招针对ie浏览器的属性兼容问题：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame该指令要记住开头需要先使用<!DOCTYPE>来声明，不然的话会不起效。如此一来的话 就可以让浏览器兼容大部分的属性了，我们可以动手demo的看一下效果。
3.常见问题
1，浏览器默认的margin和padding不同
2，a(有href属性)标签嵌套下的img标签，在IE下会带有边框。
3，几个img标签放在一起的时候有些浏览器会有默认的间距，加了问题1的解决办法之后任然无效
4、在IE6元素浮动，其宽度需要内容撑开，若内容是块元素，ie6会宽度撑开整行
5、经常使用的opacity属性大家都不陌生，但是ie浏览器的写法就很大差异。
4.解决方案
1，由于不同浏览器的很多标签的默认间距是有差别的，所以样式重置就显得尤为重要，否则网页很容易在不同浏览器上出现较大差异甚至是不能使用。最常用的有效方法就是直接使用通配符来将自带的margin和padding初始为0
*{margin:0;padding:0;}
2.解决办法是加上a img{border:none;}样式。
3，这个问题倒不是某一个浏览器的问题了，应该是属于内联元素的特有性质，有常规办法和非常规办法，新人过来肯定有遇到过这里的问题
直接将几个img标签放在同一行处理，或者是设置font-size为0，或者是给margin负值来调整他们之间的距离。
4，给里面的元素也加上浮动，这样就会解决撑开整行的破坏性。
5，其他主流浏览器用 opacity:0.6;而ie的透明度filter:Alpha(Opacity=60)，而且，还需要设置一个宽度或者给子元素定义position：relative才会生效。
5.编码实战
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--这句话让ie浏览器会自动已最高版本的内核进行渲染，可以兼容大部分属性。下面的opacity就很好的被兼容了-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style>
/*样式的初始化，可以直接去掉浏览器自带的边距，*/
*{
margin:0;padding:0;
}
.margin{
/*ie浏览器下面使用透明度的方法不是0-1，而且，还需要对父元素设置宽度，或者子元素设置定位relative。才有效。*/
width:500px;
filter:alpha(Opacity=60);
background-color:green;
opacity:0.5;
/*-webkit-opacity:0.5;*/
/*-moz-opacity:0.5;*/
/*-o-opacity:0.5;*/
}
.pic{
/*行内元素的自带间距，可以通过设置字体大小为0来解决。或者讲行内元素写在同一行可以解决该问题。*/
font-size:0;
}
.distance{
float:left;
background-color:red;
margin-left:10px;
margin-right:10px;
}
a img{
/*ie浏览器下面a标签里面的img会带出一个边框，这个时候需要先设置一下，也可以属于rest中的一项*/
border:none;
/*border:0;*/
}
input{
border:none;
/*ie低版本浏览器下会出现无效的情况，这个时候给border透明可以避免无效的情况。属于保险性质*/
border-color: transparent;
}
</style>
</head>
<body>
<p>这个是测试用字段</p>
<div>
<img src="img/putao.png" alt=""><img
src="img/putao.png" alt=""><img
src="img/putao.png" alt=""><img
src="img/putao.png" alt="">
</div>
<a href="#"><img src="img/putao.png" alt=""></a>
</body>
</html>
6.扩展思考
Q：使用组件自己的样式重置文件？
A：这个可以根据自己的习惯，编写一个可以在各个项目中直接使用的rest样式。这个可以多多看别人的rest进行了哪些优化，像淘宝，京东等这些大网站都值得参考。
7.参考文献
1、精通CSS 高级Web标准解决方案（第2版）（书籍）
2、什么是hack
http://www.3lian.com/edu/2014/10-10/171039.html
3、常见的hack技术
http://www.ynpxrz.com/n967304c2025.aspx
8.更多思考
这里只是简单的介绍了一些css方面的兼容性处理办法，其实js上面也是存在不同浏览器的兼容性问题。那么js中常见的兼容性问题又有哪些呢？
返回列表
评论