pixel perfect « 99css

Posts Tagged: pixel perfect

Pixel Perfect – Hack

比较常用的是只对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标签，详见http://www.99css.com/?p=19

通过前后台生成hook皆可

CSS Hack

比如：

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

在实际项目中使用较多的是此方法，原因详见 http://www.99css.com/?p=65#hack。当然，也可以第一种和第三种方法配合，方便通过验证

后记

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

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

——————– 2010-3-22 补充 ——————–

最近在15+ Techniques And Tools For Cross Browser CSS Coding看到针对IE7 hack的.写法，补充一下:)

未分类 — 1 Comment
21
十一 09

Pixel Perfect – 工具

之前使用最多的工具是QQ/TM的截图（快捷键CTRL+ALT+A）和肉眼估算，追求pixel perfect的话还是要专业的工具才好

FastStone Capture

身为一款截图软件却带了一把邪恶的屏幕标尺，不幸落入设计师手中成为测量偶们页面的万恶之源！

Pixel Perfect

一款基于firebug的扩展，官网为http://www.pixelperfectplugin.com，效果不错，不过只支持Firefox

Microsoft Expression Web

通过工具栏的视图-描摹图像菜单来进行设置或调出

之后配合设计视图进行调试。用起来也没那么爽，设计视图的显示效果和浏览器始终会有差异

打造自己的Pixel Perfect

Pixel Perfect扩展和EW的描摹图像功能原理类似，将效果图叠在页面下方并设置一定的透明度之后偶们再用肉眼比对。知道了原理我们自己就可以开始DIY了，代码如下：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Pixel Perfect - 99css.com</title>
<!-- Pixel Perfect -->
<style>
img.pixel-perfect{position:absolute;left:0;top:0;-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";#filter:alpha(opacity=50);}
#pg{position:relative;z-index:1;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<img class="pixel-perfect" src="设计/填写资料页副本.jpg" />').appendTo('body');
})
</script>
</head>

<body>

<div id="pg">
    <div id="hd">head</div>
    <div id="bd">body</div>
    <div id="ft">foot</div>
</div>

</body>

</html>

一个跨浏览器的Pixel Perfect就这样诞生了，使用时只需调整图片路径、top/left值、透明度即可（有时页面很长，js写在head中方便后期删除，暂时去除只需将整段注释掉；追求性能放在页面底部，不过本地调试就不用这么龟毛了吧）

剩下的就是配合firebug/IE developer toolbar进行微调，体力活开始了…

未分类 — 9 Comments
1
十一 09

Pixel Perfect – 中文字体2

如果你以为世界就此清净那就错鸟，在WIN7下有另外结果（VISTA应该接近，木有条件测试），如图：

点击图片看大图

结论：

WIN7/Arail	12px	14px文字
ie8	高12px占20px 上3px下5px 下划线在14px处	高14px占20px 上2px下4px 下划线在16px处
ff3.5	字12px高20px 上5px下3px 下划线在18px处	高14px占20px 上3px下3px 下划线在18px处

看到此，偶内牛满面，偶这就去公司加班…

未分类 — 6 Comments
31
十 09

Pixel Perfect – 中文字体1

花了几个小时小小研究了一下中文字体：

使用的是XP下的 Arial 字体（不同字体下的结果不同，即便同为中文）
列分别为12px文字、12px链接、12px加粗文字、12px加粗链接、14px文字、14px链接、14px加粗文字、14px加粗链接
行分别为IE6、IE7、IE8、FF3.5