当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > Css Hack:Pixel Perfect

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 Css Hack:Pixel Perfect


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

比较常用的是只对IE进行hack,常见的写法有以下几种:

1. IE条件注释

<!-- [ if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

还可只对某一IE版本或以下版本hack

2. html/body标签中写class hook

比如使用jQuery Browser Plugin后通过firefox浏览页面html被附加上这样的class

<html class="win firefox firefox3 gecko gecko1">

之后针对不同的浏览器(及版本)写hack

Google的某些产品使用的是此方法,比如Google Reader,只不过hook的对象为body标签而非html标签。

通过前后台生成hook皆可

CSS Hack

比如:

div{ color: black; /* all browsers */ color: red\9; /* E8 and below */ #color: green; /* IE7 and below */ _color: blue; /* IE6 and below */
}

在实际项目中使用较多的是此方法。当然,也可以第一种和第三种方法配合,方便通过验证

后记

如果不是为了pixel perfect,平时也用不到太多hack,hack多了非常令人恶心(think, there was an old lady who swallowed a fly)。

这是pixel perfect系列的最后一篇,面对“不可能完成的任务”,至少我们努力过了…