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同时包含在文档中才能够正常工作
  • 相关阅读:
    032 Gradle 下载的依赖jar包在哪?
    031 can't rename root module,Android Studio修改项目名称
    030 Cannot resolve symbol'R' 问题解决汇总大全
    029 Android Studio层级显示目录文件
    028 You are about to commit CRLF line separators to the Git repository.It is recommended to set the core. autocrlf Git attribute to true to avoid line separator issues If you choose Fix and Comit ,
    027 【Android基础知识】Android Studio 编译慢及 Adb connection Error:远程主机强迫关闭了一个现有的连接
    026 Android Studio 和Gradle版版本对应关系
    025 Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm
    024 Android Studio上传项目到Github 最全记录
    023 解决AndroidStudio下载gradle慢的问题
  • 原文地址:https://www.cnblogs.com/leeolevis/p/1585043.html
Copyright © 2011-2022 走看看