首先我们说说firefox和IE对CSS的宽度显示有什么不同:
其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’则是指整个容器的宽度,包括内容,padding ,border。
Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度
IE中:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度
所以,如果IE中定义 width:120px;padding:5px 的话,所显示的宽度就是120px.
即padding:5px是在width里面。
而Firefox中,上面这个定义,显示宽度就是 125 px;
所以,我们就必须这样定义
width:115px !important;width:120px;padding:5px;
必须注意的是, !important; 一定要在前面。
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构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^
- 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
- IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px},关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
- ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}就能解决大部分问题
- 关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
<script type="text/javascript">就可以了
- margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
<#div id="imfloat"></#div>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
分享到:
相关推荐
[新闻文章]iwms v5.0.1010 正式版 .Net2.0_iwms.zip源码ASP.NET网站源码打包下载[新闻文章]iwms v5.0.1010 正式版 .Net2.0_iwms.zip源码ASP.NET网站源码打包下载[新闻文章]iwms v5.0.1010 正式版 .Net2.0_iwms.zip...
[新闻文章]iwms v5.0.1010 正式版 .Net1.0_iwms_1.1.zip源码ASP.NET网站源码打包下载[新闻文章]iwms v5.0.1010 正式版 .Net1.0_iwms_1.1.zip源码ASP.NET网站源码打包下载[新闻文章]iwms v5.0.1010 正式版 .Net1.0_...
[CMS程序]网奇Iwms网站管理系统v5.0.1818 (.net v1.1)_iwms11(ASP.NET源码).rar
网奇Iwms网站管理系统 v5.0.1320 For .Net2.0.rar
[新闻文章]iwms(原动网新闻.Net) v4.4_iwms.zip源码ASP.NET网站源码打包下载[新闻文章]iwms(原动网新闻.Net) v4.4_iwms.zip源码ASP.NET网站源码打包下载[新闻文章]iwms(原动网新闻.Net) v4.4_iwms.zip源码ASP.NET...
[CMS程序]网奇Iwms网站管理系统v5.0.1818 (.net v1.1)_iwms11.zip源码ASP.NET网站源码[CMS程序]网奇Iwms网站管理系统v5.0.1818 (.net v1.1)_iwms11.zip源码ASP.NET网站源码[CMS程序]网奇Iwms网站管理系统v5.0.1818 ...
下载地址:http://iwms.wangqi.com/ ·采集支持utf-8和big5编码并能转换繁体为简体 ·新闻内其它网站图片与Flash自动下载 · jpg、gif、png、bmp图片自动加水印(水印图片及位置可设置) ·wap访问方式,方便手机...
采用微软 ASP.NET2.0(C#) 设计,使用分层设计模式,页面高速缓存,是迄今为止国内最先进的.NET语言企业网站管理系统。整套系统的设计构造,完全考虑大中小企业类网站的功能要求,网站的后台功能强大,管理简捷,...
全新讨论区,帖子管理操作完全在前台ajax实现实现gzip压缩脚本和css及图片,flash,节省服务器带宽添加新闻时自动根据标题从已有标签中生成相关标签全新托放式分类顺序调整,批量设置分类属性生成静态及上传建目录...
实现gzip压缩脚本和css及图片,flash,节省服务器带宽 添加新闻时自动根据标题从已有标签中生成相关标签 全新托放式分类顺序调整,批量设置分类属性 生成静态及上传建目录不再需要分区读权限 增加Wap2.0访问方式 ...
[新闻文章]iwms(原动网新闻.Net) v4.4 SQL版_iwmssql.zip源码ASP.NET网站源码打包下载[新闻文章]iwms(原动网新闻.Net) v4.4 SQL版_iwmssql.zip源码ASP.NET网站源码打包下载[新闻文章]iwms(原动网新闻.Net) v4.4 SQL...
[新闻文章]iwms v5.0.1010 正式版 .Net2.0_iwms(ASP.NET源码).rar
[新闻文章]网奇Iwms网站管理系统 v4.4_wqiwms.zip源码ASP.NET网站源码打包下载[新闻文章]网奇Iwms网站管理系统 v4.4_wqiwms.zip源码ASP.NET网站源码打包下载[新闻文章]网奇Iwms网站管理系统 v4.4_wqiwms.zip源码ASP...
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,...
[新闻文章]iwms v5.0.1010 正式版 .Net1.0_iwms_1.1(ASP.NET源码).rar
ASP.NET源码——[新闻文章]iwms v5.0.1010 正式版 .Net1.0.zip
·Windows 2003 / 2000 / XP 安装 .Net Framework 或 VS.net ·如果要使用上传功能要求上传目录有写权限 ·建议放在虚拟目录下,如果放在非虚拟目录下请把bin目录下文件 放在父级虚拟目录下的bin目录内 ...
版本信息:iwms网站管理系统5.0 开发环境:Microsoft.NETFrameworkSDK 运行条件: Windows2003/2000/XP安装.NetFramework或VS.net 如果要使用上传功能要求上传目录有写权限 建议放在虚拟目录下,如果放在非虚拟目录...
iwms5.2网站管理系统官方 官网:www.iwms.net
iwms是国内最早的asp.net新闻系统之一,主要功能有:网页自动采集、防采集、静态生成、图片/文件防盗链、图片/脚本gzip压缩、内置讨论区/广告投放功能、会员付款阅读内容... iwms网站管理系统 5.3.2 更新内容: 1...