IE iframe widget and jQuery drag and drop alignment issue_问答_开发者

IE iframe widget and jQuery drag and drop alignment issue

开发者 https://www.devze.com 2023-04-12 12:30 出处：网络

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 -

IE iframe widget and jQuery drag and drop alignment issue

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 re开发者_高级运维produce 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):