`

CSS样式表在Firefox和IE下的区别

    博客分类:
  • CSS
阅读更多

FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

  FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

  FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

  FireFox: 支持 !important, IE 则忽略, 可用 !important 为 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.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}

  3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

  ul{margin:0;padding:0;}就能解决大部分问题

  4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为

 

  FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

  IE怎么不行? .div{width:100px;margin:0 auto;}一样居中

  FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

  这个是ie对css盒模型解释有问题造成的,只能迁就它网页教学网

  FireFox: 支持 !important, IE 则忽略, 可用 !important 为 FireFox 特别设置样式

  IE7 一样兼容 !important 了

  cursor: pointer 可以同时在 IE FireFox 中显示游标手指状, hand 仅 IE 可以

  pointer是标准的写法,hand是ie6之前版本自行定义的

  补充:

  ie6有margin双倍外补丁bug,需要做css .hack

  firefox更符合标准,在浮动和清除浮动上需要特别注意,而ie容错性比较好

  ie中height小于一定值(可能是18px)时,可能会在页面上体现不出来,需要overflow:hidden;而firefox可以完全体现height;

  装好ie6 ie7 ff2大致写个一两个页面就知道大概的不同了,其实不难

  屏蔽IE浏览器(也就是IE下不显示)

  网页教学网

  *:lang(zh) select {font:12px !important;} /*FF的专用*/

select:empty {font:12px !important;} /*safari可见*/

  这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

分享到:
评论

相关推荐

    css样式表兼容总结,兼容火狐,ie6,ie7,FF

    标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...

    CSS样式表下FF与IE的区别

    在CSS样式表的应用中,Firefox(火狐浏览器)和Internet Explorer(IE浏览器)之间存在一些显著的差异。这些差异主要集中在盒模型、居中对齐、边框与背景、鼠标指针样式、以及脚本处理等方面。理解这些差异对于创建...

    浏览器Firefox与IE在CSS样式表中的差异汇编.pdf

    浏览器Firefox与Internet Explorer(IE)在CSS样式表的解析上存在一些显著的差异,这些差异在实际开发过程中可能引起布局不一致或者样式显示错误。以下是一些关键的区别和解决策略: 1. **CSS Hack** - 为了针对...

    针对firefox ie6 ie7 ie8的css样式hack

    在进行Web开发的过程中,我们经常会遇到浏览器兼容性问题,尤其是早期的Internet Explorer(IE)版本如IE6、IE7和IE8与现代浏览器如Firefox之间的差异。为了确保网站能够在不同浏览器下正常显示,开发者需要使用特定...

    CSS样式表.doc

    **CSS样式表详解** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它的主要作用是增强对网页内容的控制,使得内容和表现分离,提高了网页设计的...

    CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法

    在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时,我们需深入理解不同浏览器对CSS的支持差异,以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析: ### 1. 了解...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...

    IE与Firefox的CSS兼容大全

    在网页设计中,CSS(层叠样式表)的兼容性是一个关键问题,特别是对于历史悠久的Internet Explorer(IE)和相对现代的Firefox浏览器。由于这两者对CSS标准的解析方式不同,开发者经常面临兼容性挑战。以下是一些针对...

    解决CSS在IE与火狐下的兼容问题

    在网页设计领域,CSS(层叠样式表)是不可或缺的一部分,它用于定义页面的布局和样式。然而,由于不同浏览器的解析方式存在差异,尤其是在Internet Explorer(IE)和Firefox之间,CSS兼容性问题时常困扰着开发者。...

    CSS在ie firefox中 样式问题

    本文将深入探讨在IE和Firefox中常见的CSS样式问题及其解决方案。 1. **盒模型差异** - IE6、7采用的是"怪异盒模型",边距和内填充计算在元素宽度内,导致实际宽度与声明宽度不符。 - Firefox遵循W3C标准的"正常盒...

    css区别IE和非IE浏览器

    不同浏览器对CSS的支持程度各不相同,特别是Internet Explorer(IE)系列浏览器与其他现代浏览器(如Firefox、Chrome等)之间存在较大的差异。本文将详细介绍如何通过CSS技巧来实现对IE浏览器和其他非IE浏览器之间的...

    IE与Firefox的CSS兼容大全.rar

    在网页设计领域,IE(Internet Explorer)和Firefox是两种截然不同的浏览器,它们对CSS(Cascading Style Sheets,层叠样式表)的支持存在一定的差异。"IE与Firefox的CSS兼容大全"是一个针对这两个浏览器之间CSS兼容...

    css兼容性(IE 和 firefox)技巧大全.doc

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE(Internet Explorer)和Firefox这两个浏览器之间的差异时。本文主要针对这些差异提供了一些实用的技巧,帮助开发者解决常见的CSS兼容...

    css在firefox IE的兼容性(案例分析及解决方案)

    在网页开发过程中,CSS(层叠样式表)的兼容性问题常常是开发者面临的挑战,特别是在处理Firefox和Internet Explorer(IE)这两个浏览器时。Firefox和IE对CSS的理解和执行方式存在差异,导致某些样式在其中一个...

    CSS样式表常用小技巧

    这种方式在IE5和Firefox中有效,但在IE6中效果不同。 #### 七、Flash对象的嵌入与透明度设置 - **Flash对象嵌入**:在页面中嵌入Flash对象时,为了使其具有透明背景,需要在标签中加入特定参数: ```html ...

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

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf

    在网页设计中,CSS(层叠样式表)是用于控制页面布局和样式的语言。然而,不同的浏览器对CSS的支持程度和解析方式存在差异,特别是老版本的Internet Explorer(如IE6、IE7、IE8)与Firefox等现代浏览器。以下是对...

    CSS在IE6 IE7与FireFox下的兼容问题整理

    在Web开发中,CSS(层叠样式表)的兼容性问题一直是开发者面临的一大挑战,尤其是在早期的浏览器之间,如Internet Explorer (IE)的6、7版本和Firefox。这些浏览器对CSS标准的实现存在差异,导致在不同浏览器下页面...

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    "IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源,帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题,了解各种CSS hack及其在这些浏览器中的表现。 ...

Global site tag (gtag.js) - Google Analytics