zoukankan      html  css  js  c++  java
  • css网页布局兼容性有哪些要点与诀窍

    IE vs FF
    CSS 兼容要点:DOCTYPE 影响 CSS 处理
    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
    FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
    FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
    FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
    div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
    cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
    FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
    使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面。
    1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
     Example Source Code [www.52css.com]
    div{margin:30px!important;margin:28px;}
    注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
     Example Source Code [www.52css.com]
    div{maring:30px;margin:28px}
    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

    2.IE5 和IE6的BOX解释不一致IE5下div{300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:
     Example Source Code [www.52css.com]
    div{300px!important;width /**/:340px;margin:0 10px 0 10px}
    关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

    3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
     Example Source Code [www.52css.com]
    ul{margin:0;padding:0;}
    就能解决大部分问题

    4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
     Example Source Code [www.52css.com]

    就可以了

    这里是一个500px;margin:10px;padding:10px; border:10px;的一个盒子.
    使用widht(空格)/**/:530px,解决IE5.x系列的盒解析bug,因为IE5.x系列浏览器能读到这句.在IE5.x Win,IE6.0 Win下效果一致.
    如何使用hack解决IE5.x盒解析bug? #content {
    530px; //这个是错误的width,所有浏览器都读到了
    voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
    voice-family:inherit;
    500px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
    }
    html>body #content { //html>body是CSS2的写法
    500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。
    } #content {
    500px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
    width(空格)/**/:530px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
    }
    html>body #content { //html>body是CSS2的写法
    500px; //支持CSS2该写法的浏览器有幸读到了这一句
    } <!--[if Lte IE6]>
    #content {
    530px
    }
    <[!endif]-->
    这里是一个500px;margin:10px;padding:10px; border:10px;的一个盒子,IE5.x Win解析不正常。
    IE6盒模型在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model所以,hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作
  • 相关阅读:
    jforum二次开发教程
    gitPermission denied (publickey).
    用keytool创建Keystore和Trustsotre文件只需五步
    导入数据库时报错1067 – Invalid default value for ‘字段名’
    WordPress用户角色及其权限管理编辑插件:User Role Editor汉化版
    http://blog.csdn.net/wh211212/article/details/53005321
    centos 安装 mysql
    卸载apache服务
    Cordova插件相关常用命令
    UI 交互
  • 原文地址:https://www.cnblogs.com/leeolevis/p/1585043.html
Copyright © 2011-2022 走看看