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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

技术小阿哥 2017-11-27 15:50:00 浏览595
展开阅读全文
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.51aspx.com]
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
 Example Source Code [www.51aspx.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.51aspx.com]
ul{margin:0;padding:0;}
就能解决大部分问题

4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
 Example Source Code [www.51aspx.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同时
包含在文档中才能够正常工作。

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;


本文转自 liudao 博客园博客,原文链接:http://www.cnblogs.com/liudao/archive/2007/11/30/978006.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
技术小阿哥
+ 关注