iframe shimming или ie6 (и ниже) выберите ошибку z-index - PullRequest
Новая
       26

iframe shimming или ie6 (и ниже) выберите ошибку z-index

14 голосов
/ 22 октября 2008

Хм, я не уверен, что кто-нибудь сталкивался с этой проблемой
краткое описание IE6: любые <select> объекты отображаются поверх любого другого элемента, даже div'ов ... это означает, что если у вас есть причудливый эффект javascript, который отображает div, который должен быть над всем (например: lightbox, multibox и т. д.) ..) при щелчке по определенному элементу, и этот div перекрывает <select> ваш div, который будет отображаться, как если бы он находился под <select> [в этом случае максимальный и минимальный z-index не работают]

Я попробовал поискать в Google и нашел решение для вставки iframe
но я хотел несколько довольно чистых альтернатив или еще лучше кто-нибудь нашел лучшее решение? поскольку метод, использующий iframes, использует около 130 Мб оперативной памяти, это может замедлить работу машин для бедных людей

Ответы [ 7 ]

8 голосов
/ 22 октября 2008

Вам не нужно скрывать каждый select, используя цикл. Все, что вам нужно, это правило CSS вроде: 

* html .hideSelects select { visibility: hidden; }

И следующий JavaScript: 

//hide:
document.body.className +=' hideSelects'

//show:
document.body.className = document.body.className.replace(' hideSelects', '');

(или вы можете использовать свою любимую реализацию addClass / removeClass).

3 голосов
/ 22 октября 2008

Существует плагин для jquery под названием bgiframe , который делает метод iframe довольно простым для реализации.

Лично я как веб-разработчик дошел до того, что меня больше не волнует пользовательский опыт в IE6. Я сделаю его рендеринг как можно ближе к «правильному», и позабочусь о том, чтобы он работал, но с точки зрения скорости - тоже плохо. Они могут обновить. IE7 (хотя все еще довольно медленный, по сравнению с любым другим браузером) был выпущен в течение 2 лет (почти до самого дня!). IE8 скоро выйдет. Firefox доступен для любой платформы. Safari также вариант (и супер быстрый). Опера доступна для большинства / каждой платформы.

IE6 был выпущен более 7 лет назад. ИМХО, нет никаких причин использовать его, кроме ленивых пользователей и некомпетентных ИТ-отделов (или, если вы веб-разработчик).

2 голосов
/ 22 ноября 2008

на случай, если кому-то интересно, вот какой-нибудь код для IE. 

* html .shimmed {
    _azimuth: expression(
        this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'),
        'inherit');
}

ref: это суть от subtleGradient и это сообщение от Zach Leatherman

1 голос
/ 17 ноября 2009

Самое простое и элегантное решение этой надоедливой ошибки IE находится по адресу: http://docs.jquery.com/Plugins/bgiframe с использованием jQuery.

Я пришел к такому выводу после двухдневной попытки заставить его работать с WebSphere Portal / Portal Applications, где все динамично, включая всплывающее меню.

1 голос
/ 22 октября 2008

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

Чтобы отображаться поверх DDL, вы должны использовать другой оконный элемент управления, например, IFRAME. Вы также можете использовать малоизвестную функцию IE-only, называемую window.createPopup (), которая по сути делает всплывающее окно без хрома. У него есть ограничения, такие как неостанавливаемый щелчок, но они действительно полезны, если вы строите систему всплывающих меню.

0 голосов
/ 08 марта 2011

Я знаю, что многие люди предлагали свои советы, но в моем случае я просто скрываю select, используя jquery, как показано ниже. 

$(':date').dateinput({
    format: 'dd/mm/yyyy',
    onBeforeShow: function(event) {
        $('select').hide();
    },
    onHide: function(event) {
        $('select').show();
    }
});
0 голосов
/ 21 ноября 2008

Есть также метод activex, который я начинаю исследовать. Требуется создание условного кода для использования элемента управления activex вместо поля выбора для ie6. Есть демонстрационный скрипт , показывающий технику, которая обсуждается более подробно здесь .

Обновление: похоже, что MS Office необходим для управления Active-X на компьютере пользователя. Теоретически, это может быть как-то включено, но это становится намного более запутанным.

...