Проблемы Internet Explorer с пользовательским интерфейсом jQuery - PullRequest
Новая
       29

Проблемы Internet Explorer с пользовательским интерфейсом jQuery

0 голосов
/ 15 февраля 2012

У меня есть веб-приложение, которое отлично работает в Internet Explorer 9, Firefox и Chrome, но в Internet Explorer 7, а иногда даже в 8. возникает несколько странных функций. Я не уверен, что это просто IE проблема, учитывая, что их время от времени возникают проблемы, или если это проблема с моим собственным кодом. Во-первых, я использую вкладки пользовательского интерфейса jQuery, и во всех браузерах ошибка IE7 выглядит примерно так:

enter image description here

Однако IE7 отображает это:

enter image description here

Другими словами, он включает всю панель как часть вкладки. Код, который должен отображать это, выглядит следующим образом, поэтому, если вы видите какую-либо ошибку или объяснение, пожалуйста, дайте мне знать.

HTML 

<div id="mainTabs" class="tabs">
    <ul>
        <li><a href="#viewTab">Time Modification</a></li>
        <li><a href="#projectTab">Project Report</a></li>
        <li><a href="#teamTab">Team Report</a></li>
        <li><a href="#cerfTab">CERF Report</a></li>
        <button id="switchUser">Switch User</button>
        <select id="themeSelect">...</select>
    </ul>
    <div id="viewTab"></div>
    <div id="projectTab"></div>
    <div id="teamTab"></div>
    <div id="cerfTab"></div>

JavaScript / JQuery 

$(function() {
    $("mainTabs").tabs();
});

Так что я думаю, что это как-то связано с размещением кнопки и выбранных объектов в теге <ul>, но это был единственный способ, которым я мог управлять позиционированием их так, как они у меня (встроенные в панель вкладок). Если это то, что вызывает IE7, то есть ли в любом случае эти две функции, расположенные там по-другому, чем могло бы понравиться?

Я также использую плагин jQuery FullCalendar, позволяющий пользователю открывать диалоговое окно при выборе на временном интервале дня. Плагин FullCalendar имеет опцию select, которая запрашивает функцию для выполнения такого рода событий, и поэтому я затем открываю свой JQuery UI Dialog отсюда. Опять же, это работает в IE9, Firefox и Chrome, но не открывает диалоговое окно в IE7 или IE8. Это проблема браузера или моя собственная проблема с кодированием?

HTML 

<div id="calendar"></div>
<div id="addDialog" style="display:none;">
    <label for="list">Bug: </label>
    <select id="list">...</select>
    <p>
        <label for="start">Start:</label>
        <input id="start" class="dateTimePicker" type="text" value="" />
        <label for="end">End:</label>
        <input id="end" class="dateTimePicker" type="text" value="" />
    </p>
</div>

JavaScript / JQuery 

$("#calendar").fullcalendar({
    ...
    select: function(start, end, allDay, jsEvent, view) {
        if(view.name != "month") {
            $("#addDialog").data("start", start);
            $("#addDialog").data("end", end);
            $("#addDialog").dialog("open");
        }
    }
    ...
});

РЕДАКТИРОВАТЬ: Как примечание по второй проблеме, я заметил, что диалоговое окно откроется, когда вы выберите диапазон времени. Хотя щелчок во временном интервале календарного представления календаря технически по-прежнему выбирает временной диапазон, один щелчок не открывает диалоговое окно. Учитывая эту информацию, я думаю, что это может иметь какое-то отношение к плагину Fullcalendar, но опять же ... не позитивно.

Ответы [ 2 ]

1 голос
/ 15 февраля 2012

Размещение элементов select и button внутри ul означает , а не допустимый HTML и, безусловно, вызывает проблему. Единственный допустимый прямой дочерний контент для элемента ul - ноль или более элементов li.

Вы можете поместить их в div, который всплывает прямо или около того.

0 голосов
/ 15 февраля 2012

Вы можете сделать это с помощью CSS.Пусть родительский контейнер использует margin-left: auto; и margin-right:0px;. Это приведет к тому, что весь контент внутри родительского контейнера будет порожден в крайнем правом углу.

...