兼容性问题

兼容性问题来源

内核是浏览器最底层、最核心的代码，决定了浏览器如何解析网页，页面如何被加载，脚本如何执行。
但是不同的浏览器有不同的内核，每种浏览器对相同的网页有不同的解析方式，最终结果不一样，将这种现象称为兼容性问题。

浏览器内核

内核是浏览器最底层、最核心的代码，不同的浏览器有不同的内核。
目前主流浏览器：chrome、firefox、IE、edge、safira、opera
国产浏览器：360、搜狗、猎豹、QQ、UC等
目前国内没有自己的内核，都是使用大厂的内核；360浏览器的双核浏览器，由IE trident和safira的webkit内核集成。

内核的作用

解析网页
(1)html内容解析
(2)css解析
(3)JavaScript解析
内核里面有个很重要的一个概念：渲染引擎
渲染引擎分为几部分：
（1）HTML解析器：会构成html代码解析为一棵DOM树,上面每个标签就是dom树上一个节点。
（2）CSS解析器：将css样式计算出来，calc函数；
（3）JavaScript解析器：允许JavaScript脚本运行的环境。
（4）布局模块：主要网页中模块定位、浮动、排列在一起等等。

网页如何解析出来的？

（1）加载网页代码
判断是否是网络资源，是就利用网络模块从网络地址中加载网页代码。
如果是本地文件，则直接从本地文件中加载网页的代码到浏览器内核中。
（2）经过HTML解析器，对代码进行解析
浏览器从代码的第一行开始解析，把不同类型的代码交给对应的解析器。
html代码——HTML解析器
css代码——CSS解析器
js代码——JavaScript解析器
（3）内部表示：将各个解析器的结构综合并且梳理
把标签和对应的css结合起来，每个标签都有自己的渲染对象，标签的样式先在内部整合，JavaScript脚本内部作用在指定的标签上。
（4）布局和绘图
会把每个标签的样式、位置都绘制在页面上，如果需要使用图片、视频音频等内容，再利用对应的模块处理，处理完成之后直接显示在页面上。

兼容性问题处理

hack代码

专门针对特定浏览器设置css代码
针对不同的浏览器或浏览器不同的版本写不同的css代码，这个写css代码过程就称为css hack。
兼容性问题自查网址：https://caniuse.com/
主要学习IE hack代码：

CSS hack分类

属性前缀法：
给特定的浏览器的css样式属性前添加一些前缀，方便特定的浏览器进行识别，以达到预期的页面效果。
属性前缀法只能单个属性进行设置，多个属性一个一个进行设置。

选择器前缀法
在选择器前面添加一些前缀，只有特定的浏览器才能识别。

条件注释法
通过注释的语法来完成样式的引入，注释语法中可以检测浏览器的类型或版本。

lt 小于  lte 小于等于 gt 大于 gte 大于等于 ！非，不是

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器中显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器中显示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上（包括）版本浏览器中显示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
这段文字只在非IE8浏览器中显示
<![endif]-->

    非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器中显示
<![endif]-->

CSS兼容思想指导

优雅降级（推荐）

先不管兼容问题，直接以目前主流浏览器为主，实现页面最佳效果，然后再考虑低版本的浏览器，针对低版本浏览器写css代码，保证低版本浏览器也能有很好页面效果。

渐进增强

先把网页的内容搭建好（不考虑效果），在内容不受影响情况下，逐步添加页面效果，浏览器版本越高，效果越佳。先考虑大多数浏览器都能正常运行，给高版本的浏览器添加对应的页面效果。

结构选择器

根据HTML代码结构找到对应的标签，也是伪类选择器。

:first-child

找到满足条件的标签，并且这个标签是某个标签的第一个子标签。
语法：

找到class名为box的标签里面的所有后代p标签，并且这个标签是某个标签的第一个子标签
.box p:first-child {
                    
                    }

:last-child

找到满足条件的标签，并且这个标签是某个标签的最后一个子标签。
语法：

找到class名为box的标签里面的所有后代p标签，并且这个标签是某个标签的倒数第一个子标签
.box p:last-child {
                   
                   }

:nth-child(n)

找到满足条件的标签，并且这个标签是某个标签的第n个子标签。
语法：

找到class名为box的标签里面的所有后代p标签，并且这个标签是某个标签的第n个子标签
.box p:nth-child(n) {
                     
                     }

注意：
:nth-child(2n):找到满足条件的偶数的子标签；
:nth-child(2n-1)或:nth-child(2n+1):找到满足条件的奇数的子标签。

:nth-last-child(n)

找到满足条件的标签，并且这个标签是某个标签的倒数第n个子标签。
语法：

找到class名为box的标签里面的所有后代p标签，并且这个标签是某个标签的倒数第n个子标签
.box p:nth-child(n) {
                     
                     }

:nth-of-type(n)

找到满足条件的标签，将其筛选出来，进行重新排序，找到其中的第n个标签。
语法：

找到class名为box的标签里面的后代p标签，将其重新排序，找到其中的第n个标签
.box p:nth-of-type(n) {
                        color:red;
                        }

:nth-last-of-type(n)

找到满足条件的标签，将其筛选出来，进行重新排序，找到其中的倒数的第n个标签。
语法：

找到class名为box的标签里面的后代p标签，将其重新排序，找到其中的倒数第n个标签
.box p:nth-last-of-type(n) {
                             color:red;
                             }