第10天, BFC, IE浏览器常见兼容问题, css Hack, 图片优化, 项目测试检查

day 10

一、BFC

1、什么是BFC

BFC（Block Formatting Context），翻译为”块级格式化上下文“，该区域拥有一套自己的渲染规则，用来约束子元素在区域内如何进行排列，且与外面的区域无关

2、如何生成BFC

• 根元素
• 设置了以下属性的元素会生成BFC
  • display:inline-block
  • float:left | right
  • overflow：hidden | auto | scroll
  • position：absolute | fixed

3、BFC的特性（笔试重点）

（1）内部标签会在垂直方向上一个接一个的放置

（2）垂直方向上距离由margin决定，属于同一个BFC区域的margin会发生重叠

（3）每个标签的左外边距会与包含块的左外边界相接触（从左到右），浮动元素也是如此

（4）BFC区域不会与float标签区域重叠

（5）计算BFC的高度时，浮动子元素也参与计算

（6）BFC就是页面中的一个独立容器，容器内部的标签不会影响到外面的标签，反之亦然。

4、BFC解决的问题

（1）兄弟元素外边距塌陷问题

根据特性（2）所以兄弟元素会存在外边距塌陷问题

如何解决：根据特性（6），让其中一个元素处于新的BFC区域，这样里面的标签不会影响外面，外面的也不会影响里面

 <div style="overflow: scroll;">
    <div class="box1"></div>
</div>

<div class="box2"></div>

<style>
    .box1 {
         200px;
        height: 200px;
        background-color: aqua;
        margin-bottom: 200px;
    }
    .box2 {
         200px;
        height: 200px;
        background-color: pink;
        margin-top: 100px;
    }
</style>

（2）自适应两栏或者三栏布局

自适应两栏布局：左侧固定宽度，右侧宽度自适应 | 右侧固定宽度，左侧宽度自适应

自适应三栏布局：左右两侧固定宽度，中间宽度自适应

解决方案：根据特性（4），可以让中间盒子处于一个新的BFC区域，这样BFC区域就不会和float区域发生重叠了

<div class="wrap">
    <div class="left">左侧盒子</div>
    <div class="right">右侧盒子</div>
    <div class="center">中间盒子</div>
</div>

 <style>
    .left {
        float: left;
         300px;
        min-height: 200px;
        background-color: aqua;
    }
    .right {
        float: right;
         200px;
        min-height: 200px;
        background-color: pink;
    }
    .center {
        background-color: yellow;
        min-height: 200px;
        overflow: hidden;
    }
</style>

（3）防止文字环绕

解决方案： 让文字生成一个新的BFC区域

 img {
    float: left;
}
p {
     600px;
    /* display: inline-block; */
    /* overflow: hidden; */
    /* float: left; */
}

（4）清浮动

清除浮动中给父元素设置overflow属性，值不为vislible

根据特性（5），让父元素处于一个新的BFC区域，这样在计算父元素高度时，浮动子元素也会参与计算，就可以解决浮动带来的影响

二、浏览器常见兼容问题

1、图片下间隙问题

解决方案一：

img {
    vertical-align: middle;
    vertical-align: top;
    vertical-align: bottom;
}

解决方案二：

img {
    display: block;
}

解决方案三：给图片的父元素设置font-size:0

div {
     500px;
    border: 1px solid red;
    font-size: 0;
}

2、ie8及以下浏览器会出现图片边框问题

a标签中放置一张图片，图片在ie8-会有蓝色边框

解决方案：给图片去掉边框

img {
    /* border: 0; */
    border: none;
}

3、ie8中背景复合属性写法问题

在ie8中如果背景图片与背景图片是否重复之间没有空格，在ie8中背景简写属性有问题，例如如下代码：

/* background: url("hua.jpg")no-repeat center; */

解决方案：正确添加空格即可

background: url("hua.jpg") no-repeat center;

4、在 IE6 及更早版本浏览器中，定义小高度的容器

在ie6-浏览器会有一个最小高度，如果设置的高度小于这个值，则不能正确显示

解决方案： font-size:0;line-height:0

 div {
    height: 1px;
    background-color: aqua;
    /* 解决方案 */
    font-size: 0;
    line-height: 0;
}

5、IE6 及更早版本浏览器下，浮动时产生双倍边距的 BUG

解决方案： 针对ie6设置display:inline

 <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        float: left;
        margin-left: 50px;
         200px;
        height: 200px;
        border: 1px solid red;
        /* 属性hack */
        _display:inline;
    }
</style>

6、IE7 及更早版本浏览器下，子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题

解决方案：给父元素设置相对定位（position：relative）

<style>
    .wrap {
        position: relative;
         300px;
        height: 300px;
        background-color: aqua;
        overflow: hidden;
    }
    .box {
        position: relative;
        left: 200px;
        top: 200px;
         200px;
        height: 200px;
        background-color: pink;
    }
</style>

7、块转内联块 ie7- 不在一行显示问题

<style>
    .box {
        display: inline-block;
         200px;
        height: 200px;
        border: 1px solid red;
        /* 属性hack */
        *display:inline;
        *zoom: 1;   /*激活IE中的haslayout(相当于是IE中的BFC)*/
    }
</style>

8、IE7 及更早版本浏览器下，当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙。

解决方案：给li设置vertical-align属性，值除了visible以外都可以

<ul>
    <li>
        <a href="#">手机、电话卡</a>
        <span>&gt;</span>
    </li>
    <li>
        <a href="#">手机、电话卡</a>
        <span>&gt;</span>
    </li>
    <li>
        <a href="#">手机、电话卡</a>
        <span>&gt;</span>
    </li>
    <li>
        <a href="#">手机、电话卡</a>
        <span>&gt;</span>
    </li>
</ul>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    ul {
         300px;
    }
    li {
        list-style: none;
        height: 40px;
        line-height: 40px;
        background-color: aqua;
        padding: 0 20px;
        /* 解决方案 */
        vertical-align: middle;
        vertical-align: top;
        vertical-align: bottom;
    }
    a {
        text-decoration: none;
        float: left;
    }
    span {
        float: right;
    }
</style>

三、css Hack

使用CSS Hack可以控制不同浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍，但滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack的使用。

1、条件hack

主要用于选择IE浏览器及不同的IE浏览器的版本

if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

• 大于：选择大于指定版本的IE版本。关键字：gt（greater than）
• 大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
• 小于：选择小于指定版本的IE版本。关键字：lt（less than）
• 小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
• 非指定版本：选择除指定版本外的所有IE版本。关键字：!

<!--[if 关键词 IE 8]>
    执行的代码
<![endid]-->

例如：

<!--[if ! IE 7]>
    <p>0817web班</p>
<![endif]-->

 <!--[if IE 8]>
    <style>
        p {
            color: red;
        }
    </style>
<![endif]-->

2、属性级hack

CSS 样式属性名前或值后面加上一些只有特定浏览器才能识别的 hack 前缀或后缀，以达到预期的页面展 现效果。

_下划线：选择IE6及以下 *：选择IE7及以下

9：选择IE6+ ：选择IE8+和Opera15以下的浏览器

p {
    color: aqua;
    /* ie6- */
    _color:red;
    /* ie7- */
    *color:yellow;
    /* 9和是加在属性值的后面 */
    color: blueviolet9;
    color:chartreuse;
}

3、选择符级hack

* html IE6及更早浏览器   
* + html IE7  IE7

<style>
    p {
        height: 300px;
        background-color: chartreuse;
    }
    * html p {
        background-color: chocolate;
    }
    * + html p {
        background-color: yellow;
    }
</style>

四、图片优化

1、使用背景图

对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。

2、图片品质

注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。例：在用 ps导出 web 所有格式图片时通常选择的品质，通常选择 70-80 之间 。
注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。

3、使用精灵图

运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。

4、静态banner大图的处理

（1）有效区填白，降低图片大小

例如：有效区是980像素，那么填白区域可以比有效区小5-10像素，防止浏览器出现留白

（2）有效区的图片根据情况划分为三到五部分，注意不要切断文字

（3）图片间隙处理

<div class="wrap">
    <div class="inner">
        <img src="./images/banner01.jpg" alt="">
        <img src="./images/banner02.jpg" alt="">
        <img src="./images/banner03.jpg" alt="">
    </div>
</div>

 <style>
    .wrap {
        height: 520px;
        background: url("images/banner_bg.jpg") no-repeat center center;
    }
    /* 有效内容区 */
    .inner {
         980px;
        margin: 0 auto;
    }
    .wrap img {
        vertical-align: middle;
    }
</style>

五、项目测试检查

1、视觉与还原度检测

做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。
（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；
（2）字体、字号、文字颜色的一致性；
（3）背景图片与图片是否有丢失；
（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。

2、跨浏览器兼容测试

做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。