`

最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

 
阅读更多

自从安装了IE8.0正式版本!木头 就对基本的几个 CSS
HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助!

本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象

HACK原理:不同浏览器对各中字符的识别不同
(读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)


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 E8

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了.

 

==========================================================

 

1、Css if hack条件语法
< !--[if IE]>
Only IE <![endif]-->

仅所有的WIN系统自带IE可识别
< !--[if IE 5.0]> Only IE 5.0
<![endif]-->

只有IE5.0可以识别
<
!--[if gt IE 5.0]> Only IE 5.0+
<![endif]-->

IE5.0包换IE5.5都可以识别
< !--[if lt IE 6]> Only IE 6-
<![endif]-->

仅IE6可识别
< !--[if
gte IE 6]> Only IE 6/+ <![endif]-->

IE6以及IE6以下的IE5.x都可识别

<!--[if lte IE 7]> Only IE 7/-
<![endif]-->

仅IE7可识别
< !--[if
gte IE 7]> Only IE 7/+
<![endif]-->

IE7以及IE7以下的IE6、IE5.x都可识别

<!--[if IE 8]> Only IE 8/-
<![endif]-->

仅IE8可识别

<!--[if IE 9]> Only IE 9/-
<![endif]-->

仅IE9可识别

:在 if  后加 lt gte有不同效果 (参加其它参数同理)

<!–[if IE 8]> = IE8 仅IE8可识别
<!–[if lt IE 8]> = IE7或更低版本

<!–[if gte IE 8]> = 高于或者等于IE8版本

2、DIV+CSS实例
CSS实例一:
让IE6-IE8显示不同的内容,DIV CSS代码如下:

 

<!DOCTYPE
html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>DIV
IF条件实例</title>
</head>
<body>
你正在使用:
<!--[if IE
7]>
<h2>IE7</h2>
<![endif]-->
<!--[if IE
6]>
<h2>IE6</h2>
<![endif]-->
<!--[if IE
8]>
<h2>IE8</h2>
<![endif]-->

<!--[if IE 9]>

<h2>IE9</h2>
<![endif]-->
<br><br>
<strong>说明</strong>:如果你的浏览器版本为多少即会显示IE多少,针对IE6-IE9实验</body>
</html>

说明:以上针对不同IE显示不同网页内容DIV+CSS实例实验。

DIV+CSS实例二
让IE6-IE8显示不同CSS样式效果,DIV CSS代码如下:

 

<!DOCTYPE
html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>CSS
IF条件hack实例</title>
<!--[if IE 6]>
<style
type="text/css">
.divcss{
color:#F00;}
</style>
<![endif]-->
<!--[if IE 7]>

<style type="text/css">
.divcss{
color:#FF0;}
</style>
<![endif]-->
<!--[if IE 8]>

<style type="text/css">
.divcss{
color:#00F;}
</style>
<![endif]-->

<!--[if IE 9]>
<style
type="text/css">
.divcss{
color:#000;}
</style>
<![endif]-->
</head>
<body>
<div
class="divcss">
DIV
CSS实验提示:<br>
我在IE6下是红颜色,在IE7下是黄颜色,在IE8下是蓝颜色,在IE9下是黑色
</div>
</body>
</html>

说明:以上实验仅实验IE6-IE9下if HACK。

分享到:
评论

相关推荐

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

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

    css_hack csshack技术

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

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

    在IE6、IE7和IE8中,由于它们能够识别CSS中的hack语法,因此通过在属性值后加上特定的字符,可以区分对待这些浏览器。具体解释如下: - `#090\9`:这是为IE6、IE7和IE8设定的边框属性。由于这些浏览器能够识别`\9`...

    css兼容IE6、IE7、FF的技巧

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

    web前端规范之CSSHack[总结].pdf

    例如,下划线`_`仅在IE6中有效,星号`*`适用于IE6和IE7,而`\0`和`\9`分别针对IE8-9和所有IE内核浏览器。注意,CSS Hack的书写顺序通常按照从广泛支持到特定浏览器的顺序,以保持代码的可读性。 在实际开发中,虽然...

    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~ie9 hack兼容写法 已测试

    在网页开发过程中,浏览器兼容性问题常常困扰着开发者,尤其是对于旧版本的Internet Explorer(IE),如IE6、IE7、IE8和IE9。这些版本的浏览器对CSS的解析方式与现代浏览器存在显著差异,因此需要特殊的“hack”技巧...

    Css样式兼容IE6,IE7,FIREFOX的浏览器的写法示例介绍

    除了上述技巧,还可以使用条件注释(Conditional Comments)来针对IE6和IE7插入专门的样式表,或者使用专门的CSS修复库,如CSS3 PIE,它可以帮助IE6和IE7更好地支持一些CSS3特性。 总之,处理CSS兼容性问题需要对...

    针对IE6的一些CSS Hack编写时的注意点小结

    IE6浏览器由于其对CSS标准的支持存在许多特例和不一致性,在开发中常常需要借助一些特殊的CSS Hack技巧来处理不同浏览器间的兼容性问题。以下是从提供的文件内容中提炼出的针对IE6编写CSS时需要注意的几个知识点和...

    网站开发技巧-个人三年遇到的一些CSS经典问题及解决方法

    兼容IE6E7IE8FF的CSS HACK写法.doc和css hack 区分ie6.0 ie7.0 firesox的各种写法.doc中介绍了如何通过特定的语法结构来实现对不同浏览器的针对性优化。 3. **PNG透明度问题**:IE6对PNG-24格式的透明处理不足,...

    IE6、IE7和FF的最简单的hack技巧

    然而,由于不同浏览器对CSS的解析方式存在差异,特别是在IE6、IE7和Firefox(FF)之间,设计师和开发者常常需要采用特定的技巧,即CSS Hack,来确保样式在各种浏览器中的一致性。本文将详细介绍针对这些浏览器的最...

Global site tag (gtag.js) - Google Analytics