中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
中国互联
艺魂宝库网
时代网
招聘求职
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> XHTML布局使用说明书---浏览器兼容性举例

XHTML布局使用说明书---浏览器兼容性举例

来源:中国设计秀    作者:    点击:52     加入收藏
  不同的浏览器对CSS文件,的解析方式不同,最著名的也就是占有垄断地位的微软的IE浏览器。多年以前微软就凭借着windows系统的优势捆绑着IE浏览器打击竞争对手,不过还有Mozilla firefox也具有着非常深厚的实例,和开源的优势,占据着一定的市场份额。它们对CSS和javascript有着不同的解析方式,就像是不同的眼光去看一件事务也是不同的。
 
  IE VS FireFox CSS 兼容要点:DOCTYPE 影响 CSS 处理FIREFOX: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FIREFOX: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FIREFOX: 支持 !important, IE 则忽略, 可用 !important 为 FIREFOX 特别设置样式FIREFOX: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width, 如:height:30px !important; /* 这个 height 样式只对FIREFOX起作用 */ div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FIREFOX 中显示游标手指状, hand 仅 IE 可以FIREFOX: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格xhtml+CSS兼容性解决方案小集使用xhtml+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面。
 
  1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;2.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;} IE支持自定义光标文件cursor:url()
 
  IE支持自定义滚动条颜色风格IE6中的select有永远处在最上的bug,而且css对select不起作用。
 
  在form中,IE支持label,包括文字和图片;但是firefox不支持图片的label,点击图片不能让label for的radio或者checkbox产生效果。
 
  IE和firefox都是支持onscroll事件的,但是firefox中textarea对此事件不支持。
 
  CSS方面,IE中支持在CSS中嵌入expresion,而Firefox不支持firefox支择相邻子选择符“>”,而IE6不支持(IE7支持)
 
  firefox 对display的inline-block不支持,而IE均支持
0
顶一下
2007-08-22 14:30:00    出处:100jq
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口