<![CDATA[Pixel Perfect - 99css]]>https://www.99css.com/https://www.99css.com/favicon.pngPixel Perfect - 99csshttps://www.99css.com/Ghost 3.21Thu, 14 May 2026 15:52:00 GMT60<![CDATA[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"
]]>https://www.99css.com/179/6983728c0b74c7000133ae6fSat, 21 Nov 2009 17:32:16 GMT

比较常用的是只对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标签，详见/19

通过前后台生成hook皆可

CSS Hack

比如：

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

在实际项目中使用较多的是此方法，原因详见 /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的.写法，补充一下:)

]]><![CDATA[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="
]]>https://www.99css.com/170/6983728c0b74c7000133ae6eSat, 21 Nov 2009 16:32:00 GMT

之前使用最多的工具是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中方便后期删除，暂时去除只需将整段注释掉；追求性能放在页面底部，不过本地调试就不用这么龟毛了吧）

Next

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

]]><![CDATA[Pixel Perfect - 中文字体2]]>

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

结论：

WIN7/Arail12px14px文字
ie8高12px占20px 上3px下5px 下划线在14px处高14px占20px 上2px下4px 下划线在16px处
ff3.5字12px高20px 上5px下3px 下划线在18px处高14px占20px 上3px下3px 下划线在18px处
看到此，偶内牛满面，偶这就去公司加班… ]]>https://www.99css.com/126/6983728c0b74c7000133ae6bSun, 01 Nov 2009 10:44:09 GMT

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

结论：

WIN7/Arail12px14px文字
ie8高12px占20px 上3px下5px 下划线在14px处高14px占20px 上2px下4px 下划线在16px处
ff3.5字12px高20px 上5px下3px 下划线在18px处高14px占20px 上3px下3px 下划线在18px处
看到此，偶内牛满面，偶这就去公司加班… ]]><![CDATA[Pixel Perfect - 中文字体1]]>

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

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

点击图片看大图

结论：

加粗对字体高度无影响，其他见下表：

XP/Arail12px14px文字
ie6/7高11px占14px 上0下3px 下划线在13px处高13px占16px 上0下3px 下划线在15px处
ie8高11px占15px 上0下4px 下划线在12px处高13px占16px 上0下3px 下划线在14px处
ff3.5字11px高15px 上2px下2px 下划线在14px处高13px占16px 上1px下2px 下划线在16px处
]]>https://www.99css.com/67/6983728c0b74c7000133ae6aSat, 31 Oct 2009 18:25:00 GMT

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

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

点击图片看大图

结论：

加粗对字体高度无影响，其他见下表：

XP/Arail12px14px文字
ie6/7高11px占14px 上0下3px 下划线在13px处高13px占16px 上0下3px 下划线在15px处
ie8高11px占15px 上0下4px 下划线在12px处高13px占16px 上0下3px 下划线在14px处
ff3.5字11px高15px 上2px下2px 下划线在14px处高13px占16px 上1px下2px 下划线在16px处
]]>