浏览器的兼容性

inherit兼容性：
Internet Explorer6-11版本都不支持属性值 "inherit"。
不支持background-attachment:scroll  或者 fixed 背景为图片时，是否随滚动条滚动。
------------------------------------------------
float浮动兼容性：
方法一：
在浮动元素后面添加一个空的<div class="clearBoth"></div>
　　.clearBoth{ clear:both; }

方法二：
在浮动元素的父元素添加一个class="container"。
.container
{
　　overflow:hidden;

　　zoom:1;  ///兼容低版本IE6,7
}

方法三：
在父元素添加这个类，即可实现浮动。
        .clearfix:after{
            content: ".";
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clearfix{   ///是为了兼容I6,7 浏览器
            zoom:1;
        }

-------------------------------------------
IE不支持该属性：
IE：不支持   .block :nth-child(n){...}  给第n个class="block"的标签设定样式。
-------------------------------------------

　　.navigator{100%; height:50px;  position:fixed;  top:0px;}  //使用了fixed相对视口定位不动，脱离文档流。后面的banner会晚上跑，被导航遮住50px;

　　  .banner{margin-top:50px;} //被导航遮住50px;  使用margin-top:50px; 往下移动50px;，不会被遮住。

　　这里可以使用position:sticky; top:0px; 这是新属性，兼容性不好，所以可以使用上述fixed 代替。

<div class="navgator">   固定导航栏，不随滚动条滚动而滚动 </div>

<div class="banner">  广告栏 </div>

如下代码：

.nav{
            100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #333;
            color: #fff;
            margin: 0 auto;
            position: fixed;
            top: 0px;
        }
        .banner{
            1200px;
            height: 300px;
            background: green;
          /*   line-height: 300px;
          text-align: center; */
            color: red;
            margin: 0 auto;
            margin-top: 50px;
        }

    <div class="nav">导航栏</div>
    <div class="banner">banner栏</div>
    <div class="content">内容</div>
    <div class="footer">footer</div>

======================================