1
J'utilise la commune CSS solution pour parvenir à une position fixe d'un élément dans IE6IE6 « position: fixed » solution de contournement ne fonctionne pas avec des boîtes de sélection lors du défilement
<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]-->
Mon problème est que sur les pages cela inclut le défilement et les boîtes multi-sélection le rendu de la boîte devient totalement foiré quand je commence à défiler.
Lorsque je supprime le où l'élément fixe est, le défilement fonctionne bien ... (mais alors j'ai le fameux problème z-index avec les éléments <select>).
Est-ce que quelqu'un sait une solution pour cela?
Voici un exemple de page HTML que j'utilise pour reproduire l'erreur. En faisant défiler sur cette page le rendu de boîte de sélection devient haywire dans 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>