本帖最后由 绮丽 于 2017-8-18 10:37 编辑
前端是工作需要处理多个浏览器的兼容性,好烦心啊!怎么办???火狐?IE6,7,8?(受够了),还有对于H5+C3的不支持?PC端和移动端的不兼容。。。。。。没有关系,人生不止眼前的bug还有更远的bug,bug。。。。。。那就先总结一些PC端常见的兼容性处理问题(此处应该有掌声)
一 浏览器兼容问题的解决办法?
1 cssHACK
2 框架 html5shive,respond
3 原生js
二 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)
三 有一个导航栏在chrome里面样式完好?在IE里文字都聚到一起了,是哪个兼容性问题?
答:用了display:flex属性,在ie10以下都是无效的。
四 cssHACK的方法包括哪些?
1、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而firefox两个都不能认识。
2、选择符级Hack:比如IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
3、IE条件注释Hack:IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE:<!–[if IE]><!–您的代码–><![endif]–>,针对IE6及以下版本:<!–[if lt IE 7]><!–您的代码–><![endif]–>,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都 会生效。
例子
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} } /*chrome and safari*/
五 常见的兼容问题有哪些?
1.双边距BUG float引起的 使用display:inline;
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over: hidden,zoom:0.08 line-height:1px)
|