当前位置: 首页 > news >正文

浏览器的兼容性

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{width: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{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #333;
            color: #fff;
            margin: 0 auto;
            position: fixed;
            top: 0px;
        }
        .banner{
            width: 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>

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

 

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10658032.html

相关文章:

  • Java基础3:深入理解String及包装类
  • Java基础7:关于Java类和包的那些事
  • 关于从业以来第一个项目的总结
  • 引用还是指针?
  • 大神教你如何解决Linux系统80端口被占用
  • java B2B2C springmvc mybatis多租户电子商城系统-gateway 限流
  • 秦初霜:暴风雨前的平静!接下来这五件事需要密切关注!
  • 第三章:进程管理-进程描述符及任务结构
  • 嵌入式编程(二):ARM单片机如何将函数 定义到指定程序地址
  • 透过3D立方体深入理解perspective和translateZ的关系
  • 深入理解静态代理与JDK动态代理
  • 常见漏洞解析
  • [转] 谈谈前端异常捕获与上报
  • Apache Tomcat 8.5.40 与 7.0.94 发布
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • 【159天】尚学堂高琪Java300集视频精华笔记(128)
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • gops —— Go 程序诊断分析工具
  • Javascript Math对象和Date对象常用方法详解
  • JavaScript中的对象个人分享
  • markdown编辑器简评
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • vue和cordova项目整合打包,并实现vue调用android的相机的demo
  • XML已死 ?
  • 安卓应用性能调试和优化经验分享
  • 测试如何在敏捷团队中工作?
  • 解决iview多表头动态更改列元素发生的错误
  • 精彩代码 vue.js
  • 盘点那些不知名却常用的 Git 操作
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 微信小程序实战练习(仿五洲到家微信版)
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 在Unity中实现一个简单的消息管理器
  • 选择阿里云数据库HBase版十大理由
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • $.each()与$(selector).each()
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (二)Eureka服务搭建,服务注册,服务发现
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (一)使用Mybatis实现在student数据库中插入一个学生信息
  • (转)甲方乙方——赵民谈找工作
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • .net on S60 ---- Net60 1.1发布 支持VS2008以及新的特性
  • .NET Project Open Day(2011.11.13)
  • .NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2
  • .NET是什么
  • .Net中的设计模式——Factory Method模式
  • @zabbix数据库历史与趋势数据占用优化(mysql存储查询)
  • [ 代码审计篇 ] 代码审计案例详解(一) SQL注入代码审计案例
  • [1525]字符统计2 (哈希)SDUT