Довольно часто некоторые заказчики, отдавая макет сайта на вёрстку, требуют попиксельно достоверной точности в разметке во всех браузерах.

Проверить такое соответствие достаточно легко — нужно сделать скриншот сайта и совместить его с графическим макетом, например, в Photoshop'е.

Но вот только в процессе вёрстки использовать такой приём не очень удобно.

Решение для Firefox

Недавно я натолкнулся на addon для Firefox'а, под названием Pixel Perfect.
Он выводит полупрозрачный макет поверх вёрстки так, что сразу видны все неточности.

И всем Pixel Perfect замечателен, только предназначен он только для Firefox'а, а «работать» наша вёрстка должна в разных браузерах.

Решение для всех

Я написал небольшой скрипт, который можно подключать в файл с html-разметкой через тэг <script>.

Также его можно использовать в качестве userscript'а (greasemonkey-скрипта) во всех браузерах, для которых есть соответствующее расширение (или встроенная в0змóжность).

Для того чтобы скормить скрипту макет, нужно просто закинуть в директорию с вашим html-файлом макет в формате png, jpg или gif, предварительно переименовав его в layout.png (jpg или gif).

Хоткеи:

• shift+space — показать / спрятать слой с макетом
• ctrl+enter — изменить размеры окна браузера под размер макета (работает в FF, IE6 и Safari)

Для того чтобы разместить макет так, как нам нужно (например, если мы создаём фиксированную вёрстку, в виде колонки по центру), можно создать в той же директории, где у нас происходит всё действо, файлpmarkup.css:
/* Пример для расположения макета по центру: */
#pmOverlay { /* div, в котором находится image с макетом */
text-align: center;
}

#pmOverlayImg {
/* image с макетом */
}