`

IE与Firefox的CSS兼容大全

阅读更多
ul和ol的默认padding值是不一样的,在Firefox中,padding-left默认值为40px左右,而IE中为0,一般设置ul{margin:0;padding:0;}就能解决大部分问题。
并列排列的多个元素(图片或者链接)的代码中的空格和回车会造成元素之间的间隙,而在firefox中和IE中显示是不一样的,IE显示空格(约8px)、firefox显示空格(约4px)。
对不规范代码的兼容情况不同,IE中漏掉的关闭符号对显示不造成影响,而firefox中就会形成错乱的布局。
firefox对于宽高尺寸的严格解析会造成与设置不匹配(超出)的图片或表格将原设置div撑大。
未定义id的div,在IE中会与div属性中的其他设置有关,而在firefox中的位置会于div在文件中位置有关,紧随前一个div出现。
设置为float的div在ie下设置的margin会加倍的,特别是margin-left,这是ie6的一个bug。解决的方法是在这个div里面加上display:inline;
如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。IE里设置text-align:center,就居中了,但在FF中不行。所以一般两个都要设置。
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个height 和 width
FF对于"!important"会自动优先解析,然而IE则会忽略.如下
.tabd{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */
}

FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。

2、针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

3、firefox下多层嵌套时内层设置了浮动外层设置背景时背景不显示
这主要是内层设置浮动后外层高度在firefox下变为0,所以应该在外层与内层间再嵌一层,设置浮动和宽
度,然后给这个层设置背景(听说还有其他方法,感觉还是这方法好使)

4、属性选择器(这个不能算是兼容,是隐藏css的一个bug
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

5、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

<div id="parent">
<div id="content"> </div>
</div>


当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>


在层的最下方产生一个高度为1的空格,可解除这个问题
分享到:
评论

相关推荐

    IE与Firefox的CSS兼容大全.rar

    "IE与Firefox的CSS兼容大全"是一个针对这两个浏览器之间CSS兼容性问题的资源集合,旨在帮助网页开发者解决在跨浏览器设计时遇到的难题。 首先,IE浏览器,尤其是早期版本,如6、7和8,对于CSS标准的支持并不完全。...

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

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

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中,例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等,如何使网页正常显示的技术。这个技术的核心是 CSS Hack,即...

    IE与Firefox的CSS兼容问题

    ### IE与Firefox的CSS兼容问题:web2.0经验总结 在Web开发中,确保不同浏览器之间的CSS兼容性是一项挑战性的任务,尤其是在处理Internet Explorer(IE)与Firefox这两种具有显著差异的浏览器时。本文将深入探讨IE与...

    让CSS兼容IE和Firefox的技巧集合

    标题中的“让CSS兼容IE和Firefox的技巧集合”是指在网页设计中,针对Internet Explorer(IE)和Firefox这两种浏览器之间CSS样式兼容性问题的解决策略。描述中的“嘿呌,IE不再是个bug”暗示了这些技巧能帮助开发者...

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

    以上技巧是针对IE和Firefox之间CSS兼容性问题的一些常见解决策略。在实际开发中,还需要注意DOCTYPE声明的使用,以确保W3C标准的遵循。同时,随着浏览器的更新,一些旧的兼容性问题可能已经得到解决,但仍需要关注新...

    firefox与ie css+div兼容大全

    在网页设计中,Firefox与IE(尤其是Internet Explorer)之间的CSS兼容性问题一直是开发者们面临的一大挑战。以下是一些常见的CSS兼容性问题以及解决方案: 1. **DOCTYPE的影响**:DOCTYPE声明会影响浏览器进入不同...

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    IE6_0、IE7_0 与FireFox CSS兼容的解决方法(网上收集)

    在Web开发的历史中,处理不同浏览器间的CSS兼容性问题一直是开发者面临的挑战,尤其是针对早期版本的Internet Explorer(如IE6_0和IE7_0)与FireFox之间的差异。以下是从标题、描述以及部分给定内容中提取并详细阐述...

    ie与firefox兼容文档

    本文档将深入探讨IE与Firefox之间的兼容性问题,并提供解决策略。 IE与Firefox在解析HTML、CSS和JavaScript时的差异主要源于它们对W3C标准的支持程度以及各自特有的功能。这些差异可能导致布局错误、样式问题以及...

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

    然而,由于不同浏览器的解析方式存在差异,尤其是在Internet Explorer(IE)和Firefox之间,CSS兼容性问题时常困扰着开发者。本文将深入探讨如何解决CSS在IE与Firefox下的兼容问题,帮助你的网页在各种浏览器中展现...

    css规范_IE bug,IE与Firefox的CSS兼容问题.....整理

    本文主要探讨了针对IE浏览器,尤其是IE与Firefox之间存在的CSS兼容性问题,并提供了一些解决方案和编写高效、维护友好的CSS代码的规范。 一、使用CSS方法 遵循W3C标准编写CSS,避免使用非标准或过时的属性,这将有...

    css解决IE6,IE7,firefox兼容性问题.

    ### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展,浏览器种类日益增多,其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期,IE6、IE7 和 ...

    ie firefox 兼容问题大全

    本文将详细总结并分析IE与Firefox在CSS、DOM操作等方面的兼容性问题,并提供相应的解决方案。 #### 二、关键兼容性问题及解决方案 1. **表单元素的访问方式** - **问题描述**:在IE中,可以通过`document.form...

    IE和FireFox的CSS兼容

    在前端开发中,CSS兼容性是一个常见的挑战,尤其是在处理IE和Firefox这两个浏览器时。由于它们对CSS标准的实现存在差异,导致在不同浏览器下显示的效果可能不尽相同。以下是一些关键点,帮助开发者理解和解决这些...

Global site tag (gtag.js) - Google Analytics