`
黄继华
  • 浏览: 43037 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

FireFox和IE浏览器对于DIV+CSS设计的区别及对策

 
阅读更多

FireFox和IE浏览器对于DIV+CSS设计的区别及对策

1、实际像素
IE/Opera:对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla:对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
所以排列好及列的表格时ie和ff显示宽度稍有区别

2、水平居中
问题:div里的内容,ie默认为center,而ff默认left
解决:mairgin:0px auto;

3、高度问题
问题:如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的告诉,超过部分超出DIV底线以外,出现和下面的内容重叠的现象
解决:控制恰当的高度,或者不写,让浏览器自动调节高度,或者设置overflow:hidden;

4、clear:both;
问题:如果上面用float控制了n列DIV,下面ie会自动检测自动排列,ff则可能很不老实,到处乱动
解决:float结束后的下一个标签加clear:both;以结束float的控制

5、最大/小宽度问题
问题:min-width,max-width只是ff的命令,如何让ie实现同样的效果
解决:ie不认识min-和max-,实际ie认为min-width、max-width和width效果一样,可以用下面方法解决
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}

6、!important支持
问题:ff支持ie6.0不支持
解决:无。ie会忽略。

7、游标状态
问题:cursor:hand;仅ie支持,显示手指状态
解决:使用cursor:pointer;ie和ff都支持

8、单位问题
问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外)
解决:写全单位如padding:0px;

分享到:
评论

相关推荐

    火狐与IE浏览器之间的一些差别收集.docx

    火狐与IE浏览器之间的一些差别收集 一、IE与FireFox的js和css 二、IE6/IE7和Firefox对Div处理的差异 三、CSS完美兼容IE6/IE7/FF的通用方法

    DIV+CSS相对IE6 IE7和IE8浏览器行为区别及兼容性问题整理

    1.区别IE和非IE浏览器 复制代码代码如下: #tip{ background:blue;/*非IE背景藍色*/ background:red\9;/*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF 【区别符号】:「\9」、「*」、「_」 【示例】: 复制...

    网页切片自动生成DivCss软件(PC手机公众号)全能版

    用本软件吧,只需要导入效果图,拉框线就可以生成标准的兼容性...支持IE6、IE7、IE8、IE9、火狐、谷歌浏览器、360浏览器、搜狗高速浏览器、傲游浏览器、腾讯TT浏览器、苹果浏览器、世界之窗浏览器等等现在常用的浏览器

    火狐浏览器及DIV插件

    火狐浏览器以及div的插件,通过插件可以得到网页上的js,css等文件...IE浏览器老是受病毒的骚扰和侵犯,Firefox浏览器3.0可是在补漏洞上下了大工夫发,让病毒不易侵犯,更加保护你的电脑,让你更好的发挥你的聪明才智了

    网页自动生成DivCss软件-(PC+手机+公众号)全能版

    支持IE6、IE7、IE8、IE9、火狐、谷歌浏览器、360浏览器、搜狗高速浏览器、傲游浏览器、腾讯TT浏览器、苹果浏览器、世界之窗浏览器等等现在常用的浏览器 一个好的软件,几分钟就可以搞定几个小时、甚至几天的工作,...

    CSS浏览器兼容性常见问题总结大全(推荐)

    什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常,在另一种下就乱了,我们在编写CSS的时候会很恼火,刚修复了这个...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

    CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div...

    网页切片自动生成DivCss软件-(PC+手机+公众号)全能版

    支持IE6、IE7、IE8、IE9、火狐、谷歌浏览器、360浏览器、搜狗高速浏览器、傲游浏览器、腾讯TT浏览器、苹果浏览器、世界之窗浏览器等等现在常用的浏览器 一个好的软件,几分钟就可以搞定几个小时、甚至几天的工作,...

    div+css设置div的背景为半透明的方法

    说明: 1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当...

    让div+css兼容所有浏览器的一些注意事项

    1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: ...

    div触壁反弹特效css+js

    一个div触壁反弹的特效。适用于ie浏览器和火狐浏览器。自动捕捉窗口宽度和高度。

    FireFox浏览器和IE浏览器下CSS兼容问题

    1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: ...

    CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌

    DIV背景色渐变在以前的文章中也有介绍过,但并没有同时兼容IE、火狐、谷歌,而本文的这个示例却可以同时兼容,建议喜欢的朋友参考下

    最新网站导航好用123整站程序

    最新网站导航好用123整站程序,现在公开发布出来,是为了让更多的网友们快速架设...本程序完全与好用123一致,所有JS脚本均无错误,在IE浏览器和火狐浏览器都没有错误及错位.了解更多信息请浏览好用123 www.haouse123.com

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码及示例

    1.区别IE和非IE浏览器CSS HACK代码 复制代码代码如下:#divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】:「\9」、「*」、「...

    网址导航程序(2010年最新版本)-好用123整站程序

    2010年最新版本网址导航好用123整站程序,现在公开发布啦,是为了让更多...本程序完全与好用123一致,所有JS脚本均无错误,在IE浏览器和火狐浏览器都没有错误及错位.了解更多信息请浏览官网方站。好用123 www.haouse123.com

    火狐在用offsetHeight获取div的高度时为0的解决方法

    火狐在需要获取div的高度时,往往需要用到offsetHeight,有时会碰到offsetHeight获取到为0的现象, 在使用IE或者火狐中,特别在目前div+css的方式,往往不定义div的高度,这是在添加div内容后,需要获取div的高度时...

    div+css学习笔记(IE与fox好多不兼容的问题)

    一直用ie为准做网页,今天到火狐官方网站下了个没有google插件的安装了(特别讨厌插件,而国内几乎下载不到没有google插件的火狐浏览器!) 打开一看,哇哈,终于来了,ff好多不兼容的问题来了。随便点击了下不兼容...

    css firefox火狐浏览器下的兼容性问题

    1.DOCTYPE 影响 CSS 处理 ...4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF

Global site tag (gtag.js) - Google Analytics