Вопросы о избранных элементах в HTML были подняты во многих местах, и в проекте некоторое время назад я столкнулся с двумя небольшими вопросами о избранных элементах. Давайте обобщу их здесь. Первый является наиболее известной: общая проблема, которую Div Ploing Layer не может охватить избранную элемент под IE6. Во -первых, приведен следующий пример: Примечание: если вы посмотрите на него под Firfox и IE7
Вопросы о избранных элементах в HTML были подняты во многих местах, и в проекте некоторое время назад я столкнулся с двумя небольшими вопросами о избранных элементах. Давайте обобщу их здесь.
Связанные статьи: Решения проблемы Div -слоя, покрытого слоем,
Первый является наиболее известной: общая проблема, которую Div Ploing Layer не может охватить избранную элемент под IE6. Во -первых, приведен следующий пример:
Примечание. Если вы посмотрите как под FIRFOX, так и под IE7, результат одинаково: плавающие слои A, B и C могут быть нормальной реальностью, то есть элемент выбора ниже блокируется. Тем не менее, в IE6 существует три разных ситуации, плавающий слой A все еще нормальный; Плавающий слой B Основное корпус покрывает элемент выбора, но рама плавающего слоя не может покрыть элемент выбора; Плавающий слой 3 не может вообще покрыть элемент выбора вообще. Причиной этого явления является то, что в IE6 браузер рассматривает элемент Select как элемент уровня окна. В настоящее время DIV или другие обычные элементы не могут охватывать элемент SELECT, независимо от того, насколько высок z-индекс, но выбор может быть заблокирован IFRAME, который также является элементом уровня окна. Так делает приведенный выше пример. Плавающий слой C - это просто плавающий слой. Я не буду говорить об этом здесь больше, просто посмотрите на структуру плавающего слоя B:
<div class = cancedDiv> <iframe class = maskiframe> </iframe> <div class = maindiv> плавающий слой b </div> </div>
Используйте Div, чтобы собрать фактический Div и элемент iframe вместе, и их соответствующий стиль:
.containDiv {позиция: абсолют; Верх: 140px; Слева: 60px; } .maskiframe {position: Absolute; слева: -1px; Верх: -1px; z -index: -1; граница: 1px sold #000; высота: 50px; ширина: 50px; _height: 48px; _width: 48px;}. Maindiv {fanost: #ebac3b; width: 50px; высота: 50px;}
Плавающий слой B использует iframe, чтобы абсолютно позиционировать и установить z -индекс: -1; в содержит, а затем позволяет MainDiv, который действительно ставит контент ниже, чтобы покрыть iframe. В настоящее время iframe может охватить элемент Select, и косвенно делает Maindiv также покрывать элемент Select. Тем не менее, плавающий слой B все еще несовершенен, потому что граница iframe от плавающего слоя B здесь использует границу iframe. Сам iframe может покрыть выбор, но его граница не может, поэтому происходит плавающий слой B.
Плавающий слой А решает эту проблему и достиг идеального мышления. Это в основном то же самое, что и плавающий слой B, за исключением того, что он делает iframe больше, чем Maindiv, вниз, влево и вправо, а затем дает границу Maindiv. Таким образом, плавающая граница обеспечивается Maindiv, а весь Maindiv и граница находятся на iframe, поэтому идеальный эффект достигается!
Вторая проблема с Select - это проблема динамического генерации параметров опций в соответствии с IE. См. Пример второго вопроса выше. Нажав на ссылку (Limited FF), вы можете добавить 3 элемента опции в элемент SELECT Under FF, но она невозможно под т.е. Нажав на (общую) ссылку, вы можете добавить 3 элемента опции в элемент SELECT в соответствии с IE и FF. Причина в том, что первая ссылка - добавить элемент опции через атрибут Innerhtml элемента SELECT.
document.getElementbyId (добавить) .innerhtml = abc;
В FF нет проблем, но IE не может добавить опцию детских элементов в элемент SELECT через этот метод, но требуется метод, предоставленный второй ссылкой:
document.getElementById (добавить select) .Options.add (новый опция (a, a, false, true));