黑马程序员技术交流社区

标题: 【上海校区】教你如何快速处理前端PC端的兼容性问题! [打印本页]

作者: SH小舞莲子    时间: 2017-8-12 09:50
标题: 【上海校区】教你如何快速处理前端PC端的兼容性问题!
本帖最后由 绮丽 于 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)





作者: 那么那么纯洁    时间: 2017-8-12 09:52

作者: 天树123    时间: 2017-8-12 09:53
不错啊,莲莲
作者: 15000604524    时间: 2017-8-12 09:54
6666666666666
作者: 大柚子    时间: 2017-8-12 09:58
66666666666
作者: 小执拗    时间: 2017-8-12 16:32
厉害厉害,膜拜大神
作者: 绮丽    时间: 2017-8-18 10:42
66666是很666666  可是我喜欢给5个黑马币
作者: SH小舞莲子    时间: 2017-8-18 21:09
绮丽 发表于 2017-8-18 10:42
66666是很666666  可是我喜欢给5个黑马币

谢谢啦
作者: 不二晨    时间: 2018-7-20 11:10
优秀,奈斯
作者: 摩西摩西OvO    时间: 2018-7-23 13:56





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2