Обходной путь IE6 «позиция: исправлена» не работает с полями выбора при прокрутке - PullRequest
Новая
       18

Обходной путь IE6 «позиция: исправлена» не работает с полями выбора при прокрутке

1 голос
/ 01 марта 2010

Я использую общий CSS-обходной путь для достижения фиксированной позиции элемента в IE6 

<style type="text/css">
    .fixedPos {
        position: fixed;
    }
</style>

<!-- IE specific code: -->
<!--[if lte IE 7]>
<style type="text/css"> 
    .fixedPos {  
        position: absolute;  
        top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
    }
</style>
<![endif]-->

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

Когда я удаляю <iframe>, где находится фиксированный элемент, прокрутка работает нормально ... (но тогда у меня возникает знаменитая проблема z-index с элементами <select>).

Кто-нибудь знает решение для этого?

Вот пример HTML-страницы, которую я использую для воспроизведения ошибки. При прокрутке на этой странице окно выбора рендеринга теряет популярность в IE6 ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body class="">
    <style type="text/css">
        .fixedPos {
            position: fixed;
        }
    </style>
    <!-- IE specific code: -->
    <!--[if lte IE 7]>
    <style type="text/css">
        .fixedPos {
            position: absolute;
            top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
        }
    </style>
    <![endif]-->
    <iframe class="fixedPos" style="DISPLAY: block; width: 99%; height: 30px; z-index: 2" src="javascript:''" frameBorder="1" scrolling="no"></iframe>
    <div width="99%" class="fixedPos" style="background-color: #FFFFFF; z-index: 3">
        <table width="100%" style="margin-bottom: 5px; background-color: yellow" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td class=""> 1. Dum di dum </td>
                <td class=""> 2. Dum di dum </td>
                <td class=""> 3. Dum di dum </td>
                <td class=""> 4. Dum di dum </td>
                <td class=""> 5. Dum di dum </td>
                <td class=""> 6. Dum di dum </td>
            </tr>
        </table>
    </div>
    <div height="40px"></div>
    <br />
    <select id="" name="" size="14" multiple="multiple" style="width: 180px;" class="">
        <option value="value" selected="selected"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
    </select>
    <br />
    <select id="" name="" size="14" multiple="multiple" style="width: 180px;" class="">
        <option value="value" selected="selected"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
        <option value="value"> My Value </option>
    </select>
</body>
</html>

1 Ответ

0 голосов
/ 06 мая 2011

Это скорее всего выражение IE. Они переоцениваются практически при каждом взаимодействии с пользователем и довольно ресурсоемки. Может быть, попробовать позиционировать его с помощью JS?

...