当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > IE8 CSS hack

CSS样式表
CSS 书写有怎样的功能
FireFox中上层高度不影下层的解决办法
CSS text-shadow属性
CSS @import与link的具体区别
详解css 定位与定位应用
网页设计新手30条进阶秘技
CSS分栏布局的方法:绝对定位和浮动
针对IE8正式版的CSS hack
条件 CSS的使用
CSS 垂直居中五种实现方法
CSS教程 汇总让IE6崩溃的几种方法
左上角图片文字环绕在图片右侧
鼠标指向网页图片时图片周围显示虚线框
CSS 快速提升设计可读性和维护性
CSS3 完美实现圆角效果
网页排版 5个CSS基础
CSS3 圆角效果
HTML5 CSS3给网站设计带来出色效果
CSS 网页布局 表格制作实例
css 滚动条换色调整代码

CSS样式表 中的 IE8 CSS hack


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 125 ::
收藏到网摘: n/a

针对IE8正式版的CSS hack目前可以找到的分为2种:

第一种:”\9″:

基本的写法:

1..test { color/*\**/: blue\9 }

这个IE6、IE7、IE8都能识别;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack:(转载

1..header {width:300px;} /* 所有浏览器*/
2..header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */
3..header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/
4..header {_width:290px;} /* IE6能识别,IE7、IE8和FF不能识别*/

第二种:就是使用IE的条件注释

条件注释是IE特有的一种功能,能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS。
条件注释功能非常强大,可以进行true和false判断,例如:
程序代码
<!–[if IE]>此内容只有IE可见<![endif]–>
<!–[if IE 6.0]>此内容只有IE6.0可见<![endif]–>
条件注释能被IE判断是什么版本的浏览器,并在符合条件的情况下显示其中的内容,从IE5.0到7.0都支持注释功能,而且版本号精确到小数点后4位:
程序代码
<!–[if IE 6.1000]>此内容只有IE6.1可见<![endif]–>
IE条件注释还支持感叹号非操作:
程序代码
<!–[if !IE 6.0]>此内容除了IE6.0版本之外都可见<![endif]–>
并且支持前缀,用于判断更高版本或是更低版本:
程序代码
<!–[if gt IE 5.0]>此内容只有IE5.0以上版本可见<![endif]–>
这里的gt全称为greater than表示当前条件版本以上版本,但不包含当前版本。
还有其它几个前缀:
lt 表示less than 当前条件版本以下的版本,不包含当前版本。
gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。
lte 表示less than or equal 当前版本以下版本,并包含当前版本。

其他一些css hack的测试:

1..color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
2..color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
3..color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
4..color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

其中:OP表示Opera,SA表示Safari

参考阅读:

http://ladysign-apps.com/blog/archives/529

http://webdevelop.nitamihai.com/ie8-css-hack/

<!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>区别IE6、IE7、IE8、FireFox的CSS hack - www.newcss.cn</title>
<style type="text/css">
<!--
#test,#note{
margin:0 auto;
text-align:center;
}
#test {
width:200px;
height:30px;
border: 1px solid #000000;
color:#fff;
line-height:30px;
}
.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/  
_background-color: #009933; /*IE6会变为绿色*/
}
-->
</style>
</head>

<body>
<div id="test" class="color">测试方块 hi.baidu.com/dpxdqx </div>
<div id="note">
<strong style="color:#009933">IE6</strong>
<strong style="color:#0066FF">IE7</strong>
<strong style="color:#FF0000">IE8</strong>
<strong style="color:#CC00FF">FireFox</strong>
</div>
</body>
</html>