firefox与ie的兼容（css，html）

最新推荐文章于 2024-11-08 14:35:14 发布

weixin_30516243

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量71

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/natureclove/archive/2013/03/19/ieandff.html

版权

一。在 CSS中常用特殊字符识别表:

(1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;

(2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ;

(3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_;

(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)
示例:

(1)区别FF(IE8)与IE6 IE7

backgorund:orange; FF和IE8背景色将为橘黄色

*backgorund:red;   IE6和IE7背景色将为红色

(2)区别FF(IE8)与IE6与IE7

background:orange;   FF和IE8背景色将为橘黄色

*background:red !important; IE7背景色将为红色

*background:blue;     IE6背景色将为蓝色

(3)区别FF(IE8)与IE6与IE7

background:orange;        FF和IE8背景色将为橘黄色

*background:red;          IE7背景色将为红色

_background:blue;         IE6背景色将为蓝色

(4)区别FF与IE6 IE7 IE8 IE9

color:gray;       FF等非IE浏览器字体色将为灰色

color:red\9;     IE8 IE9字体色将为红色

*color:green;     IE7字体色将为绿色

_color:blue;     IE6字体色将为蓝色

提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！

总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.

二。2.在ie浏览器中不能够理解！important的优先级，因此，可以利用！important，设置针对ie和非ie的浏览器的样式，只要在feiie流浪其样式的后面加上1important就可以了 .

三。兼容IE与firefox的css 线性渐变（linear-gradient）见网页 http://www.cnblogs.com/top5/archive/2012/02/14/2351960.html

四。ie6对png图片格式不支持透明解决方式如下：

在head标签中加入

<script src="js/iepng.js" type="text/javascript"></script>

<script type="text/javascript">
EvPNG.fix('div, ul, img, li, input'); //EvPNG.fix('包含透明PNG图片的标签'); 多个标签之间用英文逗号隔开。
</script>

注：在table中对背景图片的透明不作用。但对图片仍有作用。

五。ie的if hack:

按原意是:
   lt：less than 当前指定版本以下，不包含当前版本
   gt：greater than 当前指定版本以上，不包含当前版本
   lte：less than or equal 当前指定版本以下，包含当前版本(等于)

   1.  除IE外都可识别 
   2. 
   3. 
   4. 
   5. 
   6. 
   7. 
   8. 
   9. 
   10. 
   11. 
demos:
/* css中*/

/* html 中*/

/*添加class*/

/*添加link css*/

六。针对火狐height:auto无效解决方案（css clearfix）

Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，
内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开(auto不起作用)。
method1:直接在最大层加入 overflow:hidden;
method2:在float:left的Div之后加入<div style="clear:both"></div> 这样加入的弊端是，JS DOM找
节点时会出现了一个多余的节点，这个也是个没用的DIV

七。ie6对floating的问题：

针对IE6 对 float 元素显示不正常的问题
测试了很多次，发现跟 margin 和 padding 没有直接的关系，本质的问题根源在于，包含 float 元素的外层 div，没有设置足够的宽度和高度，也就是说，这个容器没有足够的空间用来显示内部所有的 float 元素。
margin 和 padding 只是一个间接原因，如果没有内外边距，可能外层 div 刚好可以容纳内部的 float。
加上边距后，每个 float 占用的空间就变大了，首先带来的问题是 div 的宽度不够，那么，愚蠢的 IE6 就会产生莫名其妙的问题，反映给用户的现象就是出现鬼影。
解决方案一：准确计算内部 float 元素加在一起占用的宽高，确保外层 div 在 css 中明确指定了具体的 width 和 height 像素值，问题不会再出现。
解决方案二：给浮动的div加上两个语句 1、浮动的div 设置display:inline 2、浮动的div 加overflow:hidden
这样就能解决ie6 下的flaot问题了！

八。IE下margin:0 auto不居中解决方法

正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。

如下代码:
<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div id="con">margin: 0 auto 内容居中显示</div>
解决方法一

可以是对网页主体<body>声明文本居中，即body{text-align:center}
即:
<style type="text/css">
body{text-align:center}
#con{width:980px;martin:0 auto;}
</style>
<div id="con">margin: 0 auto 内容居中显示</div>
解决方法二

其实和解决方法一差不多，只是在要居中的div外层添加多一个div,并使其居中
即：
<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div style=“text-align:center”><div id="con">margin: 0 auto 内容居中显示</div></div>
解决方法三

出现这个现象的原因在于文档的DTD声明；
修改DTD为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">