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{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:
 Example Source Code [www.52css.com]
div{width: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]

就可以了

这里是一个width: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 {
width:530px; //这个是错误的width,所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:500px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
}
html>body #content { //html>body是CSS2的写法
width:500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。
} #content {
width:500px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:530px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}
html>body #content { //html>body是CSS2的写法
width:500px; //支持CSS2该写法的浏览器有幸读到了这一句
} <!--[if Lte IE6]>
#content {
width:530px
}
<[!endif]-->
这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子,IE5.x Win解析不正常。
IE6盒模型在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model所以,hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作

转载于:https://www.cnblogs.com/leeolevis/archive/2009/10/17/1585043.html

css网页布局兼容性有哪些要点与诀窍相关推荐

  1. IE和Firefox浏览器CSS网页布局不同点

    CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然webjx.com介绍过很多这方向的 知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefo ...

  2. css网页布局中文字排版的属性和用法

    前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...

  3. Float构建三栏DIV CSS网页布局

    你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...

  4. html css网页布局实例简单,Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)...

    网页的基本结构 新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...

  5. 南大软院大神养成计划--CSS网页布局

    学习小结 今天主要学习了CSS样式设置小技巧和CSS网页布局. 网页主要元素是图片和文字,网页的基本布局就是CSS样式将块与块不同的摆放.对一些元素设置它的水平位置,垂直位置,最终达到目的. 比如说水 ...

  6. python学习 day49之CSS网页布局

    CSS网页布局 一 网页布局方式 二 标准流 三 浮动流 什么是脱离文档流? 浮动元素脱标文档流意味着 注意点: 让两个元素显示到一行的 两种实现方式 方式一:修改显示方式为inline-block ...

  7. 054.CSS网页布局

    文章目录 一.网页布局方式 二.标准流 三.浮动流 (一)浮动流相关概念 1.什么是浮动流? 2.什么是脱离文档流? 3.什么是半脱离文档流? (二)如何使用浮动流 1.浮动元素贴靠问题 2.浮动元素 ...

  8. week9 day4 CSS网页布局

    week9 day4 CSS网页布局 一.网页布局方式 二.标准流 三.浮动流 3.1 什么是脱离文档流? 3.2 什么又是半脱离文档流 3.3 浮动元素贴靠问题 3.4 浮动元素字围现象 3.5 浮 ...

  9. Div+CSS网页布局对网站搜索引擎优化的影响

    Div+CSS网页布局对网站搜索引擎优化的影响 我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...

最新文章

  1. Windows下创建PXE网络安装Linux[Redhat AS5.5]IBM X3650
  2. jtable根据内容自动调整列宽
  3. 网上的一篇spring security详解教程,觉得不错,转过来了
  4. Linux RPM 常用命令
  5. hikari如何切换数据源_hikari数据库连接池
  6. Tsinsen A1493 城市规划(DP + CDQ分治 + NTT)
  7. 解决Div自适应高度的方法(转)
  8. matlab 游标 精度,如何在MATLAB数据光标中显示更高精度的数字?
  9. 基于深度学习的大豆病虫害自动计数(SLIC超像素方法进行图像分割)
  10. 自动化运维工具(ansible入门教程)
  11. python基础--面向对象之封装
  12. switchHost管理员身份运行出错问题
  13. 【笔记】逻辑门图解—与门、或门、非门、与非门、或非门、异或门、同或门
  14. 供应链优势持续赋能 国美生态圈日趋完善
  15. 使用小米蓝牙耳机airdots青春版的感受及单耳双耳配对教程(转载)
  16. python中的defined什么意思_我的python怎么又not defined
  17. 2.5导入和混合配置 P61 Spring实战 第四版
  18. 使用addClass和removeClass完成内容切换
  19. 与时间和频率测量有关的一些重要概念(抖动,游走,MTIE、TDEV)
  20. 未能加载文件或程序集 Renci.SshNet, Version=2016.1.0.0, Culture=neutral, PublicKeyToken= 1cee9f8bde3db106或它的某

热门文章

  1. span里面插入文字
  2. webpack --- html-webpack-plugin
  3. 01 React初步认知、React元素、渲染、工程化
  4. 标准正弦波变频电源调制方式的实现
  5. 计算机加入域 不能访问网络位置 解决办法
  6. 对寄存器ESP和EBP的一些理解
  7. Reverse-engineer Source Code into UML Diagrams
  8. [转] C# 路径(目录)
  9. 变量在内存中的值[c][code]
  10. XVID基本参数解析