zoukankan      html  css  js  c++  java
  • CSS浏览器兼容问题总结

    为什么会出现浏览器兼容问题?

    由于各大主流浏览器是不同的厂家开发的,所以使用的核心也不相同,架构代码很难重合,就会产生各种各样的bug。

    IE6中常见的css解析bug

    1)默认高度(IE6)部分块元素会拥有默认的高度

    hack1:给元素添加声明:font-size:0;

    hack2:给元素添加声明:overflow:hidden;

    2)各浏览器的按钮大小不一样/边框显示不一样

    hack:统一大小(宽和高);

    hack1:给input外边加一个标签,给标签加边框,再取消input的默认边框;

    hack2:给背景图插入;

    3)表单元素行高对齐方式不一致

    hack:给表单元素添加统一的声明:float:left;

    4)双倍浮动问题

    hack:给浮动元素添加声明:display:inline;

    5)img产生的间距

    hack:font-size:0;

    6)div中插入图片时,图片会将div下方撑大3像素

    hack1:将</div>和<img>标签写在一行,中间没有空格;

    hack2:将<img>装换成块元素,给<img>添加声明:display:block;

    7)li里a加display:block或者float;会出现行高不一致,会把父元素高度撑大3像素左右

    hack1:display:inline-block;

    hack2:display:inline;

    8)li里的图片间隙,在li里插入图片时,图片会把li下方撑大3像素

    hack1:将<img>转为块元素,给<img>添加声明:display:block;

    hack2:给img定一个声明margin-bottom:-5px;

    hack3:将<li>设置高度,给<li>添加声明overflow:hidden;

    《补充》

    !important关键字过滤器

    表示所附加的声明具有最高优先级的意思,但由于IE 6及更低版本不能识别它,则可以利用IE6这个bug作为过滤器。

    取消超链接的虚拟框:outline:none;

  • 相关阅读:
    SpringBoot 整合Shiro
    Shiro 学习
    SpringBoot 整合security、thymeleaf
    【SpringBoot__Mybatis】整合MyBatis 配置文件版2
    SpringBoot 配置Druid数据源及监控
    lombok 使用
    thymeleaf 常用
    随机模块
    md5加密
    python正则
  • 原文地址:https://www.cnblogs.com/ylup/p/5638095.html
Copyright © 2011-2022 走看看