BFC与浏览器兼容

以下代码说明什么？

<!--[if !IE]>
   <script>alert(1);</script>  
<![endif]-->

所有浏览器均不弹出1

BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。

1. BFC是什么？

• BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2. 如何生成BFC

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

3. BFC作用

• 创建BFC来避免垂直外边距叠加
• 创建BFC来清除浮动
• 创建BFC来实现自适应布局

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
• 如何不让相邻元素外边距合并：

1. 可以把相邻元素放在不同的BFC中即可阻止外边距合并。
2. 父子元素外边距合并则可以给父元素设置border或者padding或者让父元素成为BFC元素。

什么是 CSS hack？在哪个网站查看标签(属性)的浏览器兼容情况。

1. 什么是CSS hack

• 由于不同厂商的浏览器，比如Internet Explorer, Safari, Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器写不同的CSS，让它能在不同的浏览中也能得到我们想要的页面效果。

2. 查看标签属性

• https://caniuse.com/

列举浏览器兼容的处理范例

1. 使用合理的框架
2. 使用条件注释
3. CSS hack
4. 使用兼容工具

以下工具/名词是做什么的？

1. 条件注释

• 条件注释是于HTML源码中被IE有条件解释的语句，条件注释可被用来向IE提供及隐藏代码。

2. IE Hack

• IE 浏览器不同版本之间的存在表现差异。针对这些差异而引入的。用于处理兼容性

3. js 能力检测

• 用js识别浏览器是否支持特定的能力。

4. html5shiv.js

• 创建一些比如IE6~IE8 上不支持的HTML5标签

5. respond.js

• IE6~8不支持CSS3媒体查询，而这个可以模拟CSS3媒体查询

6. css reset

• 去掉一些默认样式，给一些基准的样式，你也可以在上面修改

7. normalize.css

• 保护有用的浏览器默认样式而不是完全去掉它们把很多属性的样式做一个同一化修复浏览器自身的bug，并保证各浏览器的一致性
• 优化CSS可用性。保护它的原有价值，修复bug。

8. Modernizr
   -用于处理浏览器兼容性。首先探测浏览器支不支持某个属性，再html后面加上相应的class。
9. postCSS

• 写CSS属性的时候，按照标准的去写，不要去考虑浏览器的版本，前缀等。等写好之后，通过一个命令让它自动加一个前缀。

渐进增强和优雅降级分别是什么意思？

1. 渐进增强（Progressive Enhancement）

• 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
• 相当于向上兼容
• 渐进增强观点则认为应关注于内容本身

2. 优雅降级（Graceful Degradation）

• 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
• 相当于向下兼容
• 优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站

下列属性，兼容哪些浏览器？

1. inline-block:>=ie8
2. min-width/min-height:>=ie8
3. :before,:afte:>=ie8
4. div:hover: >=ie7
5. inline-block: >=ie8
6. background-size: >=ie9
7. 圆角: >= ie9
8. 阴影: >= ie9
9. 动画/渐变: >= ie10

ie6、7的 hack 写法是？

• 区分IE和Firefox

#tip {
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE6、IE7、IE8背景变红色*/
}

• 区别IE6、IE7、IE8、Firefox

#tip {
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

• 区别IE6、IE7、Firefox (方法 1)

#tip {
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
} 

• 区别IE6、IE7、Firefox (方法 2)

#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
} 

• 区别IE7、Firefox

#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
} 

• 区别IE6、IE7 (方法 1)

#tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
} 

• 区别IE6、IE7 (方法 2)

#tip {
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
} 

• 区别IE6、Firefox

#tip {
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
} 

一个小demo

代码地址
预览地址

1.png