IE iframe 小部件和 jQuery 拖放对齐问题答案

【问题标题】：IE iframe widget and jQuery drag and drop alignment issueIE iframe 小部件和 jQuery 拖放对齐问题
【发布时间】：2011-10-11 16:44:17
【问题描述】：

我使用 jQuery UI 和拖放插件创建了一个小部件。现在，我发现 IE 存在一些问题。

可以通过 -http://widget.adipa.com 访问此小部件。在这个 URL 上，widget 可以很好地与 IE7/8 配合使用。

但是当我将这个小部件嵌入到 iframe 中时，就像 here 所做的那样，它开始给出未对齐的图块。在下面的图片中，可以看到瓷砖之间有很少的空白 -

如此处所示，在 A 和 E 之间，它有空白。

您可以在 iframe here 和没有 iframe here 的情况下检查小部件。

重现错误的步骤 -

以上步骤适用于没有 iframe 的 IE，但不适用于 IE iframe 小部件。

这是因为 IE 使用 iframe 和没有 iframe 呈现不同的东西还是 jQuery 的问题。似乎 jQuery 在其中做了很多 hack 来支持 IE。

谢谢。

【问题讨论】：

【解决方案1】：

我已经测试了你的小部件，当你拖动一个字母并将它放下时它看起来确实出现了一个空白（即使在我测试过的 IE9 中也是如此）。

这是因为设置的 doctype，这将导致 IE 以不同于其他浏览器的方式呈现空间。比如下面的html：

<span style="border: 1px solid black">a </span>

（注意字母“a”后面的空格）。这将在 IE 与 e.g. 中呈现不同。 Firefox 因为 IE 也渲染了空间。但是，要消除这种情况，请更改文档的文档类型；现在我认为我们应该使用 HTML5 (as mr Resig discuss)：

<!DOCTYPE html>

这将使浏览器进入标准模式，并使空间消失。

另一种可能性是编辑您的 HTML 并删除元素中的所有空格......糟透了，我知道 :)

无论如何，希望这会有所帮助！

【讨论】：

感谢@Fredrik，我尝试使用您指定的文档类型，但它仍然给出了一个空格。对于某些 Windows 机器来说，它似乎只为 iframe-inside-widget 渲染空间，并且 onsite(widget.adipa.com 即不在 iframe 内) 小部件运行良好。
好的，难道这些机器上的 IE 设置为“Compability Mode”/“Quirks Mode”？您是否尝试过所有空间删除选项？
如果是关于空间的，那么这些将显示在瓷砖列表以及掉落的瓷砖上，目前它仅用于掉落的瓷砖。那么它可以是不同的东西吗？
这个真的很奇怪。但我的猜测是，由于 IE7 可能会渲染空格/制表符/crlf，所以这将是一个偏移计算问题……我真的认为删除空格应该最终解决这个问题（我自己也去过那里）。
当我在 IE9 中呈现页面时，我得到 IFrame 版本的“IE7 标准”和非 iframe 版本的“IE9 标准”。请尝试在 IFrame 包装器（外部文档）中设置 DOCTYPE 指令。那绝对应该这样做！