jquery - 动态插入 iframe 的网页的 Html 看起来与原始页面略有不同

Question

我有一个网页，我抓取了 html，通过 socket.io 通过 websockets 将它发送到另一个带有空 iframe 的页面，然后动态地将 html 插入 iframe。

我用来插入 html 的代码如下：

frame.open();
frame.write(html);
frame.close();

但是，DOM 元素的某些大小和间距似乎与原始页面略有不同。

这是两个屏幕截图，向您展示我的意思。很难看出差异，但顶部的搜索栏长度略有不同，每首歌曲的标题与大缩略图的距离也略有不同：

原始页面：

在此处输入图像描述

带有动态插入 html 的 iframe 的页面

在此处输入图像描述

html 中的唯一区别是将相对 url 更改为绝对 url。除此之外，html、浏览器和窗口大小都是相同的。此外，css 样式是相同的。

这里发生了什么？

score 1 · Accepted Answer

一些默认设置（如边距和填充）在怪癖和标准模式之间有所不同。
因此请确保 DOCTYPE 声明与原始声明相同。

或者更正式地说，如果原始页面有任何触发标准模式的 DOCTYPE 声明，那么 iframe 中的源代码也需要具有类似的 DOCTYPE。（不必相同，只要它们触发相同的模式即可。）

1 回答 1