1

一般的な 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>
4

1 に答える 1

0

おそらくIE式です。これらはほぼすべてのユーザー インタラクションで再評価され、かなりリソースを消費します。JSで配置してみては？

于 2011-05-05T21:35:14.710 に答える