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

CSS样式表
CSS 表单元素不继承body的字体属性
网页制作学习教程 CSS Position
网页设计学习教程 CSS盒模型
vertical-align 表单元素垂直对齐的解决方法
不用Cookie的仿刷新二级高亮菜单
CSS3 优势以及网页设计师如何使用CSS3技术
CSS 网页制作 提高CSS可阅读性
CSS 样式表中引用图片地址在各浏览器中的差异
CSS Sprite优化 减少HTTP链接数
网页制作中应用的50个CSS技巧(国外)
CSS 英文教程 CSS语法
CSS 网页文字渐变效果
纯css 圆角实现代码
CSS 新的图像替换方法
不必需的样式脚本文件导致页面不能及时更新
CSS 约定写法 利用扩展
最全的CSS浏览器兼容问题小结
CSS 网页图文混排的10个技巧
IE的CSS制作网页技巧3则
创造100% 自适应css布局的行之有效的方法

CSS样式表 中的 IE8 CSS hack


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 123 ::
收藏到网摘: 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>