IE iframe小部件和jQuery拖放对齐问题 [英] IE iframe widget and jQuery drag and drop alignment issue
问题描述
我已经创建了一个小部件使用jQuery UI和拖放插件。现在，我在IE上发现了一些问题。
这个小部件可以在 - ，且没有iframe 此处。
重现错误的步骤 -
-
在第一页小部件上 - 在第一个文本上键入Adipa框，然后点击下一步。
-
在第二页，在中间显示的设计中，双击任何字母表将其删除。 >
-
只需从左侧的字母列表中拖动字母表。
上述步骤适用于IE而不使用iframe， IE iframe小部件。
这是因为IE渲染东西不同于iframe，没有iframe，或者是jQuery的问题。似乎jQuery正在做相当多的黑客来支持IE。
谢谢。
我测试了你的小部件，确实看起来像一个白色的空间出现，当你拖动一个字母和它下降（甚至在我测试的IE9）。
这是因为doctype的设置，这将导致IE以不同于其他浏览器来呈现空间。例如以下html：
< span style =border：1px solid black> a< / span>
（注意字母'a'后的空格）。这将在IE中以不同的方式呈现。 Firefox因为IE也渲染了空间。但是，为了使它消失，更改文档的文档类型;现在我认为我们应该使用HTML5（ as mr Resig discuss ）：
<！DOCTYPE html>
这将使浏览器处于标准模式，
另一个可能性是编辑你的HTML并删除你的元素中的所有空格......唉，我知道：）
反正，希望这有帮助！
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.
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:
<span style="border: 1px solid black">a </span>
(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):
<!DOCTYPE html>
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!
这篇关于IE iframe小部件和jQuery拖放对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
