IE iframe 小部件和 jQuery 拖放对齐问题
我使用 jQuery UI 和拖放插件创建了一个小部件。现在，我发现 IE 存在一些问题。
可以通过以下网址访问此小部件：http://widget.adipa.com。在这个 URL 上，小部件可以很好地与 IE7/8 配合使用。
但是当我将此小部件嵌入 iframe 中时，就像 那样在这里，它开始给出未对齐的图块。在下图中，可以看到图块之间有一些空白 -
As在这里可以看到，A 和 E 之间有空白。
您可以在此处检查 iframe 中的小部件并且没有 iframe 此处。
重现错误的步骤 -
在第一页小部件上 - 在第一个文本框中键入“Adipa”，然后单击“下一步”。
在第二页上，在中间显示的设计中，双击任何字母将其删除。
只需从左侧的字母列表中拖动任何字母即可。将此字母图块拖放到设计中的空白区域。
上述步骤适用于不带 iframe 的 IE，但不适用于 IE iframe 小部件。
这是因为 IE 在使用 iframe 和不使用 iframe 时呈现的内容不同，还是 jQuery 的问题。似乎 jQuery 做了很多修改来支持 IE。
谢谢。
I have created a small widget using jQuery UI and drag-drop plugins. Now, I am finding some issues with IE.
This widget can be accessed at - http://widget.adipa.com. At this URL, widget works well with IE7/8.
But when I embed this widget inside the iframe, as done here, it starts giving misaligning tiles. In the image show below, it can be seen that tiles are placed with little white spaces in between -
As seen here, between A and E, it has the white space.
You can check the widget in iframe here and without iframe here.
Steps to reproduce the error -
On first page widget - type 'Adipa' on first text box and click 'Next Step'.
On Second page, in design which is shown in middle, double click on any alphabet to remove it.
Just drag any alphabet from list of alphabets on left side. Drop this alphabet tile to empty space in design.
Above steps works well with IE without iframe and doesn't with IE iframe widget.
Is this because IE renders things differently with iframe and without iframe or is it issue with jQuery. Seems jQuery is doing quite a bit of hacks therein to support IE.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我已经测试了你的小部件，确实，当你拖动一个字母并将其放下时，它看起来确实会出现一个空白（即使在我测试的 IE9 中也是如此）。
这是因为设置的文档类型，这将导致 IE 以与其他浏览器不同的方式呈现空间。例如下面的 html：（
注意字母“a”后面的空格）。这在 IE 和 Firefox 中的渲染方式会有所不同，因为 IE 也会渲染空间。但是，要消除这种情况，请更改文档的文档类型；现在我认为我们应该使用 HTML5（正如 Resig 先生讨论的那样）：
这将使浏览器在标准模式下，使空间消失。
另一种可能性是编辑 HTML 并删除元素中的所有空格......很糟糕，我知道:)
无论如何，希望这有帮助！
I've tested your widget, and indeed it looks like a white space appears when you drag a letter and the drop it (even in IE9 which I tested in).
This is because of the doctype that's setup, and this will cause IE to render spaces differently than other browsers. For instance the following html:
(notice the space after the letter 'a'). This will render differently in IE vs e.g. Firefox since IE also renders the space. However, to make that go away, change the doctype for your document; nowdays I think we should go with HTML5 (as mr Resig discuss):
This will put the browser in standards mode, and make the space dissapear.
Another possiblity is to edit your HTML and remove ALL spaces within your element ...... Sucks, I know :)
Anyway, hope this helps!