如何开发兼容性项目-项目开发记录

接到一个新任务是要为公司内网搭建官网。于是先按着ui图做了一版，登到内网上一看，ie连flex都不兼容！我的hover为什么也失效了（眼前一黑）颤抖着双手打开看版本……幸好上去看得早，还没怎么开始做，但是怎么开发兼容性项目呢，我又愁了。

遂把遇到的一些问题和如何开发的过程记录在这里，苦中作乐：这也是一种修行吧。

1、can I use这个网站可以查兼容性
https://www.caniuse.com/

2、查了下可以使用IETester做，我懒得下，直接用ie做页面了，控制台能看版本效果，试过谷歌的ie插件，不是很好用。
现在的方式是打开两个窗口，一个是谷歌，一个是ie对照着开发，速度有点慢，但是这样可能会保险一点。

注意敏感标签前加一下前缀噢

3、line-height失效——ie的line-height没有把框撑起来，谷歌的撑起来了，如果瞎改padding，又担心适配了ie，谷歌的框高度会变成line-height+padding。
font-size、color、cursor、line-height等属性是继承属性
小心继承属性。不过这个还算好解决，使用:not选择器不让它集成，不要让line-height影响到我们的元素，然后元素内部自己设padding立起来。

4、width设置100%超出框外，是因为没有把padding算进去，使用
width: 100%;
box-sizing: border-box;

5、flex是可以用的。但是有一些地方会失效。
我研究过后。。flex失效是因为没有设置父元素的宽度，之前是拿内部数据撑起来的，因为官网数据暂时没有我使用的假数据，失去假数据之后撑不起来，又没设置width，就直接瘪下去了，相当于你设置了max-width结果没有min-width。

ie 6-9不能使用flex，想做自适应项目，一般是float+百分比布局。父标签使用伪类清除float副作用计算高度。
本次我的项目很幸运的适配ie11哈哈哈哈（笑出声）

附.clearfix{
zoom:1
}
.clearfix::after{
content:’’;
height:0;
visibility:hidden;
clear: both;
}

6、但是grid布局是真的8行了，于是使用float代替了grid布局
记得float如果超出了那可能是要设置 box-sizing: border-box;

7、hover不显示
这是我最迷茫的地方了。。为什么hover不显示呢，查询了一下原因：

8、ie不支持rgba（我ie11都无法显示rgba为啥啊。。明明can i use上是可以的？）

终于知道为啥啦！
因为我使用的是#XXXX这种方法，所以ie无法识别，必须用rgba这样才可以。
为了使之兼容，看到了这种方法：https://blog.csdn.net/github_38771368/article/details/74201804

ie8也可以显示啦偶也

9、热知识：ie6-9不支持transition

10、text-align-last：justify。text-align: justify;只能针对多行文本，单行文本不能这样，所以使用text-align-last，但是兼容性不好，修改办法：
首先把要两边对齐的单行文本里每个字中间都打个空格，不打空格就分不开。大概就是有空格和没空格的区别。

在p后加一个after伪类元素，假装有多一行，我看有答主是这样写的：
::after{
content: ‘’;
display: inline-block;
width: 100%;
}

但是我自己写的时候发现这样反而不行，我直接p::after {}，里面啥都没有，反而可以了。。。额，那就这样吧。