• html+css中常见的浏览器兼容性处理


    1.居中问题

    div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;

    2.高度问题

    两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的最后,闭和前加一个沉底的空div,对应CSS是:.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

    3.clear:both;

    不想受到float浮动的,就在div中写入clear:both;

    4.IE浮动 margin产生的双倍距离

    #box {
    float:left;
    100px;
    margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
    display:inline; //使浮动忽略
    }

    5.padding问题

    FF设置 padding 后,div会增加 height 和 width,但IE不会 (* 标准的 XHTML1.0 定义 dtd 好像一致了)高度控制恰当,或尝试使用 height:100%;宽度减少使用 padding但根据实际经验,一般FF和IE的 padding 不会有太大区别,div 的实际宽 = width + padding ,所以div写全 width 和 padding,width 用实际想要的宽减去 padding 定义。

    6.div嵌套时 y轴上 padding和 marign的问题

    FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
    IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
    FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的距离为0,子marign 作用到 父div 外面

    7.padding,marign,height,width的傻瓜式解决技巧

    注意是技巧,不是方法:
    写好标准头
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding

    8.列表类

    1. ul标签在FF中默认是有 padding值的,而在IE中只有margin有值
    先定义 ul {margin:0;padding:0;}
    2. ul和ol列表缩进问题消除ul、ol等列表的缩进时,样式应写成: {list-style:none;margin:0px;padding:0px;}

    查看浏览器兼容系代码处理大全:http://user.qzone.qq.com/1047832475/2

  • 相关阅读:
    Sqlite中文排序
    关于java中实现在oracle数据库中实现对中文首字母进行排序的解决方案
    Java面试题全集(下)
    Java面试题全集(上)
    更新Svn客户端后,右键菜单中没有TortoiseSVN
    Maven项目报错:Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clea
    华为机试题---1、字符串最后一个单词的长度
    ES6 类 继承
    JS 创建对象的几种方法(总结)
    80端口和8080端口的区别是什么
  • 原文地址:https://www.cnblogs.com/0351jiazhuang/p/4206990.html
Copyright © 2020-2023  润新知