IE与Firefox的CSS兼容概括

最新推荐文章于 2025-10-09 00:04:33 发布

原创最新推荐文章于 2025-10-09 00:04:33 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #Firefox #CSS #Flash #浏览器

WEB开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了解决CSS在不同浏览器间兼容性问题的方法，包括调整margin、padding的处理方式，利用特殊语法实现样式差异化，以及解决图片与容器间距等问题。

DOCTYPE 影响 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属性，只需要把代码改为

建议：在网页设计时检验您的网页CSS对浏览器的兼容性，这样可以有效避免由于浏览器不兼容而引起的版面错乱问题

CSS hack:
区别IE6 与FF ：
background: orange ;*background: blue ;

区别[color=BlueIE6[/color]与IE7 ：
background: green !important;background: blue ;

区别IE7 与FF ：
background: orange ; *background: green ;

区别FF ，IE7 ，IE6 ：

background: orange ;

* background: green !important ;

* background: blue ;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

	Internet Explorer 6	Internet Explorer 7	Firefox
*	√	√	×
!important	×	√	√

另外再补充一个，下划线"_ ",
IE6支持下划线，IE7和firefox均不支持下划线。(推荐)

于是大家还可以这样来区分：firefox ，IE7 ，IE6
: background: orange ;*background: green ;_background: blue ;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

让Div在IE和Firefox下自适应高度

<div style="height:100%; overflow:auto;"> 自适应高度</div>

呵呵，然后发现一个很奇怪的现象，就是如果只添加"height:100%; "(设置高度100%)就IE下可以自适应高度而FireFox不行，如果只添加"overflow:auto; "(设置溢出自动)就FireFox下可以自适应高度而IE不行，所以完美的解决办法就是"height:100%; overflow:auto;"两个属性同时添加进去就可以了...

图片与容器下边界有空隙的解决方法

比较有效的三种方法：

第一，给图片img标签display:block。

img{display:block}

第二，定义容器里的字体大小为0。

div {
    width:110px;
    border:1px solid #000000;
    font-size:0;
}

第三，定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top

img{vertical-align:bottom}

造成图片在IE下与容器下边界有空隙的原因

图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。

至于这里的HTML属性align="center"（对于图片浏览器会处理成align="middle"），就相当于vertical-align:middle; 所以道理也是一样的，只要vertical-align不取baseline，这个空隙就消失了。

表单输入框与图片不能对齐的解决办法

vertical-align: middle;

在表单输入框和图片的样式定义中设置 vertical-align: middle; 可解决该问题

Flash 与 div 层次(z-index)

NOTE: 支持其它浏览器(firefox opera etc.) 则使用 <embed wmode="transparent" />在embed节点中加入wmode值.

window 模式

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。

Opaque 模式

这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式

透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。