网页前端设计

http://www.86y.org

搜索文章

最新的CSSHACK写法

用声音读出全文关注我吧
 2012/6/30 11:38:16 阅读次数:6823

最新区分兼容IE6/IE7/IE8/IE9/FF的CSSHACK写法和Cssifhack条件语法操作说明

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

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

HACK原理:不同浏览器对各中字符的识别不同

在 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]-

说明:以上针对不同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。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭