Bug IE7 (encore) auto-resize de <select>

Hello bande de geek,

Voilà, dans mes péripéties webesques je suis tombé sur un comportement étrange de IE 7 avec des select. Il semblerait qu'à chaque transfert d'option d'un select à l'autre la largeur du select est recalculé par rapport à l'état précédent. Dans le cas d'une largeur en pourçents, ça nous donne donc p.ex. 50%-25%-12%-... Je n'ai pas trouvé de référence à ce problème avec google est mon ami, je vous soumet donc la chose pour examen post-traumatique et éventuellement administration de js/css pourri en intraveineuse en vue d'une intervention rapide sur mon app.

Merci d'avance de votre diagnostique éclairé.

Voici la page html complète et minimaliste pour faciliter les tests :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ch" lang="fr-ch">
 
  <head>
 
    <title>Test IE resize</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="fr, fr-ch" />
 
    <script type="text/javascript">
 
      // Transfert les options sélectionnés du <select> id=idFrom au <select> id=idTo
 
      function selectTransfer(idFrom, idTo) {
 
        var selectFrom = document.getElementById(idFrom);
        var selectTo = document.getElementById(idTo);
 
        for (var i = 0; i < selectFrom.options.length; i++) {
 
          if (selectFrom.options[i] && selectFrom.options[i].selected) {
 
            selectFrom.options[i].selected = false;
            selectTo.appendChild(selectFrom.options[i]);
            i--;
          }
        }
      }
 
    </script>
 
    <style type="text/css">
 
      select { width: 48%; }
 
    </style>
 
  </head>  
  <body>
 
    <select multiple="multiple" id="from" onclick="selectTransfer('from', 'to');">
      <option value="1">Daniel Jackson</option>
      <option value="2">Samantha Carter</option>
      <option value="3">Jack O'Neill</option>
      <option value="4">Til'k</option>
    </select>
 
    <select multiple="multiple" id="to" onclick="selectTransfer('to', 'from');">
    </select>
 
  </body>
</html>