使用CSS进行布局和格式化的屏幕抓页...如何抓取适用于html的CSS？

我正在开发一个应用程序,用于对外部网页的一小部分进行屏幕抓取(不是整个页面,只是其中的一小部分).

所以我的代码完全适用于抓取html,但我的问题是我不仅要抓取原始html,而且还要用来格式化我正在提取的页面部分的CSS样式,所以我可以显示在新页面,原始格式完好无损.

如果您熟悉firebug,它可以显示哪些CSS样式适用于您突出显示的页面的特定子集,所以如果我能找到一种方法,那么我可以在显示时使用这些样式我的新页面上的内容.但我不知道该怎么做........

今天我需要刮掉Facebook共享对话框,以便在我们的Facebook应用构建器中用作动态预览示例.我已经使用了Firebug 1.5代码库并添加了一个新的上下文菜单选项"复制带内联样式的HTML".我从lib.js复制了他们的getElementHTML函数并修改它来执行此操作:

删除class,id和style属性

删除onclick和类似的JavaScript处理程序

删除所有数据 - 某些属性

删除显式href并将其替换为"#"

用div替换所有块级元素和使用span替换内联元素(以防止在目标页面上继承样式)

绝对相对的网址

内联所有应用的非默认css属性为全新的样式属性

通过使用traversion DOM树来考虑样式化父/子继承来减少内联样式膨胀

缩进输出

它适用于更简单的页面,但由于Firebug(或Firefox？)中的错误,解决方案不是100%健壮.但是,当由可以调试和修复所有怪癖的Web开发人员操作时,它绝对可用.

到目前为止我发现的问题:

有时候不会发出明确的css属性(它会严重破坏布局)

:hover和其他伪类无法以这种方式捕获

firefox在其模型中仅保留mozilla特定的css属性/值,因此例如你丢失-webkit-border-radius,因为CSS解析器跳过了这个

无论如何,这个解决方案节省了我很多时间.最初我是手动选择他们的样式表,并进行手动选择和后处理.我们的类命名空间很慢,很无聊和污染.现在我可以在几分钟而不是几小时内废弃facebook标记,导出的标记不会干扰页面的其余部分.