`

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

阅读更多

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个 ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方法又不能用了,怎么办呢?

第一种方法:

还好,微软提供了这样一个代码:

<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了,所以,基本上可以无视ie8,剩下的代码只需要这样写 就可以了

background:#ffc; /*  对firefox有效*/
*background:#ccc; /* 对ie7有效 */
_background:#000; /* 只对ie6有效 */
解释一下吧:

firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了,所以只认background:#ffc,看 到的是黄色;

ie7前两短都能认,以最后的为准,所以最后解析是background:#ccc,看到的是灰色;

ie6三段都能认,而且“_”这个只有ie6能认,所以最后解析是_background:#000,看到的是黑色

阿门!已经是最简单和最好理解的写法了,如果你是google进来的,我可以很负责任的告诉你,这种方法是ok的,我测试过。

ie8的那段兼容7的代码我也测试过了,在我现在的windos 7 测试版所带的ie8是没问题的,以后ie8正式版出来还管不管用就不知道了。

ps:如果你发现按我这样写还是有问题的话,请查看一下你的html头,看看<head>之前的内容是不是这样的标准写法

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd “>
<html xmlns=”http://www.w3.org/1999/xhtml “>

这个是现在比较规范的写法,如果你是用dreamweaver做页面的话,默认也是这种规范的,切记,非这种规范写法的,兼容性不能保证

第二种方法:

要求苛刻的朋友是不愿意在页面头部增加<meta http-equiv=”x-ua-compatible” content=”ie=7″ />这样一句代码的,因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。早些天本站发布了一篇《完美兼容 ie6,ie7,ie8以及firefox的css透明滤镜》,可能当时测试的疏忽,IE8的兼容性没有解决好,好多朋友回复说用不了。今天抽出些时间, 查阅大量资料,终于解决了这个问题了。

以下是兼容IE6/IE7/IE8/FF的写法,注意下面的顺序不可颠倒

margin-bottom:40px;       /*ff的属性*/
margin-bottom:140px\9;    /* IE6/7/8的属性 */
color:red\0;              /* IE8支持 */
*margin-bottom:450px;     /*IE6/7的属性*/
下面以一个实例的形式表现,大家可以运行代码查看一下效果

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法——www.ietester.net</title>
<style type="text/css">
#abc {
 border:2px solid #00f;     /*ff的属性*/
 border:2px solid #090\9;   /* IE6/7/8的属性 */
 border:2px solid #F90\0;     /* IE8支持 */
 _border:2px solid #f00;     /*IE6的属性*/
 }
 /*上下顺序不可以写错*/
 </style>
</head>
<body>
<div id="abc">
  <ul>
    <li>FF下蓝边</li>
    <li>IE6下红边</li>
    <li>IE7下绿边</li>
    <li>IE8下黄边</li>
    <li>转载请注明来www.ietester.net</li>
  </ul>
</div>
</body>
</html> 
 
分享到:
评论

相关推荐

    ie6 ie7 ff浏览器兼容

    2. **IE6/7/8兼容写法**: ```css border:2px solid #090\9; ``` 对于IE6/7/8浏览器,使用`\9`后缀可以确保这些版本的IE能够正确解析CSS代码。这里的边框颜色被设置为绿色。 3. **IE8兼容写法**: ```css ...

    区分ie6 7 8 FF 的css hack 日常总结

    "区分ie6 7 8 FF 的css hack 日常总结"这个主题集中讨论了如何针对IE6、IE7、IE8以及Firefox等浏览器编写特定的CSS代码来实现跨浏览器的兼容性。 首先,让我们了解CSS Hack的基本概念。CSS Hack是指由于不同浏览器...

    css浏览器兼容写法

    最后,对于IE8,由于它在某些方面与IE6和IE7有显著不同,可能需要使用开发者工具进行调试,通过不断测试和调整,确定哪些CSS规则需要为IE8单独编写,以实现最佳的兼容性效果。 总之,处理CSS浏览器兼容性问题需要...

    IE6、IE7、Firefox之间的兼容写法

    本文将重点探讨IE6、IE7以及Firefox之间的CSS兼容性写法,帮助开发者更好地解决实际项目中的兼容性问题。 #### 二、CSS Hack技术概述 为了确保网页在不同浏览器中的表现一致,开发者常常会采用一种名为“CSS Hack”...

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

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

    CSS 完美兼容IE6/IE7/FF的通用hack方法

    important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)&lt;style&gt;#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}&lt;/style&gt; 2, IE6/IE77对FireFox *+html 与 *...

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

    ### IE6、IE7、IE8、Firefox、Chrome、Safari的CSS Hack兼容一览表 在Web开发过程中,为了确保网站能够在不同的浏览器中保持一致的显示效果,开发者常常需要运用CSS Hack技术来解决浏览器间的兼容性问题。CSS Hack...

    css兼容IE6、IE7、FF的技巧

    ### CSS兼容IE6、IE7、FF的技巧详解 #### 一、CSS Hack技术 **CSS Hack**是一种针对不同浏览器的特性和版本差异编写特定样式的技术。它可以帮助开发者解决跨浏览器兼容性问题。 ##### 1. 通用Hack方法 对于**IE6...

    全面兼容ie6,ie7,ie8,ff的CSS HACK写法

    这种CSS HACK的写法确保了在IE6、IE7、IE8以及Firefox浏览器中都有特定的表现,实现了全面兼容。 需要注意的是,在CSS中使用HACK虽然可以解决一时的兼容性问题,但这种方法有时会降低代码的可读性和可维护性,同时...

    ie6_ie7_ie8_ff(火狐)浏览器兼容性

    在IT行业的前端开发领域,浏览器兼容性一直是一个关键议题,特别是在处理旧版浏览器如IE6、IE7、IE8以及火狐(Firefox)时。本文将深入探讨这些浏览器的兼容性问题,以及如何通过特定的技术手段来实现跨浏览器的一致...

    css_hack csshack技术

    ` 这样的写法可以区分IE6、IE7和其他现代浏览器。 #### 四、实例演示 假设我们需要让一个段落文本的颜色在不同的浏览器中显示不同的颜色: ```css p { color: brown; /* 所有浏览器默认颜色 */ color: red \9; ...

    2010全面兼容多浏览器IE6-IE7-IE8-FF的CSS HACK写法

    本文将探讨一种2010年时全面兼容这些浏览器的CSS HACK写法。 首先,为了解决IE8的兼容性问题,我们可以使用微软提供的`&lt;meta&gt;`标签,如下所示: ```html &lt;meta http-equiv="x-ua-compatible" content="ie=7" /&gt; ``...

    全面兼容ie6,ie7,ie8,ff的最简单的css写法

    本篇文章将探讨如何实现对IE6、IE7、IE8及Firefox全面兼容的最简单CSS写法。 首先,针对IE8的兼容问题,可以通过在`&lt;head&gt;`标签内添加以下代码来解决: ```html &lt;meta http-equiv="x-ua-compatible" content="ie=7...

    ie6~ie9 hack兼容写法 已测试

    标题中提到的“ie6~ie9 hack兼容写法”涉及了在不同版本的Internet Explorer浏览器中,尤其是IE6到IE9之间存在的兼容性问题,以及在CSS代码中使用特定的技巧来解决这些问题。IE浏览器因遵循自己的渲染引擎和一些私有...

    IE兼容文档

    在Web开发中,浏览器兼容性一直是一个重要的问题,尤其是对于旧版本的Internet Explorer(IE),如IE6和IE7。本文主要讨论如何通过CSS Hack来解决IE、Firefox等浏览器之间的样式兼容问题。 一、CSS Hack 1. `!...

Global site tag (gtag.js) - Google Analytics