黑马程序员技术交流社区

标题: 【上海校区】教你如何快速处理前端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