#jquery #internet-explorer #jquery-ui #cross-browser #jquery-ui-draggable
#jquery #internet-explorer #jquery-пользовательский интерфейс #кросс-браузерный #jquery-ui-перетаскиваемый
Вопрос:
Я создал небольшой виджет, используя пользовательский интерфейс jQuery и плагины для перетаскивания. Теперь я нахожу некоторые проблемы с IE.
К этому виджету можно получить доступ по адресу —http://widget.adipa.com. По этому URL виджет хорошо работает с IE7 / 8.
Но когда я встраиваю этот виджет в iframe, как это сделано здесь, он начинает выдавать несоосные плитки. На изображении, показанном ниже, видно, что плитки размещены с небольшими пробелами между ними —
Как видно здесь, между A и E есть пробел.
Вы можете проверить виджет в iframe здесь и без iframe здесь.
Шаги по воспроизведению ошибки —
-
На виджете первой страницы введите «Adipa» в первом текстовом поле и нажмите «Следующий шаг».
-
На второй странице, в дизайне, который показан посередине, дважды щелкните по любому алфавиту, чтобы удалить его.
-
Просто перетащите любой алфавит из списка алфавитов с левой стороны. Поместите этот алфавитный фрагмент на пустое место в дизайне.
Вышеуказанные шаги хорошо работают с IE без iframe и не с IE iframe widget.
Это потому, что IE по-разному отображает вещи с iframe и без iframe, или это проблема с jQuery. Кажется, jQuery делает довольно много взломов для поддержки IE.
Спасибо.
Ответ №1:
Я протестировал ваш виджет, и действительно, похоже, что при перетаскивании буквы появляется пробел (даже в IE9, в котором я тестировал).
Это связано с типом документа, который настроен, и это приведет к тому, что IE будет отображать пробелы иначе, чем другие браузеры. Например, следующий html:
<span style="border: 1px solid black">a </span>
(обратите внимание на пробел после буквы «a»). Это будет отображаться по-разному в IE по сравнению, например, с Firefox, поскольку IE также отображает пространство. Однако, чтобы устранить это, измените doctype для вашего документа; сейчас я думаю, что мы должны перейти на HTML5 (как обсуждает мистер Ресиг):
<!DOCTYPE html>
Это переведет браузер в стандартный режим и приведет к исчезновению пространства.
Еще одна возможность — отредактировать ваш HTML-код и удалить ВСЕ пробелы в вашем элементе…… Отстой, я знаю 🙂
В любом случае, надеюсь, это поможет!
Комментарии:
1. спасибо @Fredrik, я пробовал с указанным вами типом документа, но он по-прежнему дает пробел. Кажется, что на некоторых компьютерах с Windows это пространство для рендеринга только для iframe-inside-widget и на месте(widget.adipa.com т. е. не внутри iframe) виджет работает хорошо.
2. Хорошо, может быть, IE на этих компьютерах настроен на «Режим совместимости» / «Режим причуд»? Вы пробовали вариант удаления всего пробела?
3. если бы речь шла о пробелах, то они отображались бы в списке плиток, а также в отброшенных плитках, в настоящее время это доступно только для отброшенных плиток. так может ли это быть чем-то другим?
4. Это действительно странно. Но я предполагал, что, поскольку IE7 может отображать пробел / tab / crlf, это было бы проблемой вычисления смещения… Я действительно думал, что удаление пробелов должно в конечном итоге исправить это (я был там сам).
5. Когда я отображаю страницу в IE9, я получаю «стандарты IE7» для версии IFrame и «Стандарты IE9» для версии, отличной от iframe. Пожалуйста, попробуйте также установить директиву DOCTYPE в оболочке IFrame (внешний документ). Это определенно должно сработать!