IE 8 problème de largeur fixe de la sélection

Question

Je dois spécifier une largeur au select dans mon html.

Cela fonctionne bien dans tous les navigateurs sauf dans IE8, qui coupe le texte qui dépasse la largeur

CSS

select {
        border: 1px solid #65A6BA;
        font-size: 11px;
        margin-left: 22px;
        width: 166px;
    }

HTML

        Un peu de texte
        Texte plus long que la largeur du select
        Un peu de texte
        Un peu de texte
        Un peu de texte

DEMO

Je suis ouvert aux solutions en js, jquery, mais préférerais une solution utilisant uniquement du css

Answer 1

Réparé !

Voici le jsFiddle révisé : http://jsfiddle.net/PLqzQ/

Le truc est d'ajouter le sélecteur focus à votre CSS afin qu'il ressemble à ceci :

select {
        border: 1px solid #65A6BA;
        font-size: 11px;
        margin-left: 22px;
        width: 166px;
        overflow:visible ;
    }

select:focus { width:auto ;
position:relative ;
}​

Je l'ai testé dans IE8 et ça fonctionne parfaitement.

TRÈS IMPORTANT : Vous devez ajouter une définition Doctype à votre code sinon la correction ne fonctionnera pas pour IE8.

Exemple

Answer 2

J'ai trouvé toutes les autres réponses vraiment peu fiables et trop compliquées. Cela peut être facilement accompli avec le CSS suivant (du moins dans mon cas) :

html.IE8 .SelectContainer {
    position: relative;
}

html.IE8 .SelectContainer select {
    position: absolute;
    width: auto; /* Ou fixe si vous le souhaitez. */
    max-width: 100%;
}

html.IE8 .SelectContainer select:focus {
    max-width: none;
}

J'ai défini une classe sur l'élément html si le navigateur est IE8 (ou moins) (recherchez comment faire cela sur Google).

Placez votre select à l'intérieur d'un .SelectContainer et lorsqu'il est cliqué, il s'expandra selon les besoins.

Pas besoin de jQuery, commentaires conditionnels, etc. Beaucoup plus simple et fonctionne beaucoup plus en douceur, du moins pour mes besoins.

J'espère que aucun d'entre vous n'aura jamais besoin d'utiliser ceci.

Il est temps que le gouvernement américain passe à un navigateur moderne !

Answer 3

La page en question était une page très ancienne et elle force IE 8 à passer en mode de compatibilité, donc la solution css n'a pas fonctionné.

J'ai fini par le réparer en utilisant le morceau de code jquery suivant

Supposons que le select ait une classe de fixedWidth

$el = $("select.fixedWidth");
$el.data("origWidth", $el.outerWidth()) 

$el.mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

Answer 4

J'ai rencontré le même problème et j'ai également essayé mouseenter et mouseleave mais je trouvais que c'était très maladroit. J'ai consulté la liste des événements pour les éléments select (de MSDN) et j'ai essayé d'utiliser beforeactivate et deactivate à la place. À mon avis, cela fonctionnait beaucoup plus fluidement. Testé sur une page s'exécutant directement dans IE8 (pas en mode de compatibilité) :

$('select').beforeactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', 'auto');

});

$('select').deactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', '166px');
});

Answer 5

C'était un plugin pratique que j'ai découvert en triant les problèmes d'IE8. Jetez-y un œil, IE8 EXPAND SELECT WIDTH. Fonctionne incroyablement bien. Facile à installer.