IE 8 de largeur fixe sélectionnez problème

- Je spécifier une largeur à la select dans mon code html.

Il fonctionne très bien dans tous les navigateurs, sauf dans IE8, qui coupe le texte qui est plus grande que la largeur

CSS

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

HTML

<select>
        <option value="1">Some text</option>
        <option value="2">Text Larger Than the Width of select</option>
        <option value="3">Some text</option>
        <option value="4">Some text</option>
        <option value="5">Some text</option>
    </select>

DÉMO

Je suis ouvert à js, jquery solutions, mais préférez un css seule solution

vous souhaitez fixer la largeur et après qui vous voulez si le texte n'est plus alors votre, sélectionnez menu devrait augmenter rite ?
J'imagine que vous ne serez jamais obtenir des résultats parfaits. IE8 (et ci-dessous) a été programmé pour afficher des listes de sélection comme ça. Peu de Googling et cette source: css-tricks.com/select-cuts-off-options-in-ie-fix quel genre de travaux, il rend la boîte de sélection plus large quand le curseur est dans IE. Des problèmes pourraient survenir, cependant, selon la façon dont vous placez votre select élément. Si c'est juste inline, puis, soudain, la modification de la largeur pourrait changer d'autres choses autour.
Malheureusement, cette solution ne fonctionne pas pour moi, parce que la sélectionner dans un menu et qui serait la cause de la menu de fausser la

OriginalL'auteur Clyde Lobo | 2012-09-07

  1. 10

    Fixe!

    Ici est la version révisée de la jsFiddle: http://jsfiddle.net/PLqzQ/

    L'astuce est d'ajouter les focus sélecteur CSS de sorte 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é avec IE8 et il fonctionne comme un charme.

    TRÈS IMPORTANT: Vous devez ajouter un Doctype Définition de votre Code, sinon le fix ne fonctionne pas sur IE8.

    Exemple
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Le comportement est maladroit et pas comme il se comporte dans les autres navigateurs. La longueur de la sélectionner du texte ne devrait pas être élargi, mais le menu déroulant.
    ce n'est pas une très belle solution, certes, mais au moins il fonctionne. Nous essayons de résoudre un problème de navigateur, donc de la chance que nous obtenons un déjà 🙂 je voudrais appliquer un CSS pour ie8 seulement si

    OriginalL'auteur Cynthia

  2. 2

    J'ai trouvé tous les autres réponses pour être vraiment feuilletée et compliqué. Ceci peut être facilement accompli avec le code CSS suivant (au moins dans mon cas):

    html.IE8 .SelectContainer {
    position: relative;
}

html.IE8 .SelectContainer select {
    position: absolute;
    width: auto; /* Or fixed if you want. */
    max-width: 100%;
}

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

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

    Mettre votre select à l'intérieur d'un .SelectContainer et lorsque vous cliquez dessus, il va développer si nécessaire.

    Pas besoin de jQuery, les commentaires conditionnels, etc. Beaucoup plus simple et fonctionne beaucoup plus lisse, pour mes besoins, au moins.

    J'espère qu'aucun de vous ne jamais avoir à l'employé.

    Il est temps pour le gouvernement des états-unis pas de passer à un navigateur moderne!

    Beaucoup mieux que d'utiliser JS. Éventuellement envelopper les styles à l'intérieur <!--[if IE 8]> <![endif]-->

    OriginalL'auteur Josh M.

  3. 1

    J'ai eu le même problème et j'ai aussi essayé mouseenter et mouseleave mais je pensais que c'était très maladroit prospectifs. J'ai vérifié le une liste d'événements pour sélectionner les éléments (à partir de MSDN) et essayé d'utiliser beforeactivate et désactiver intead. Il a travaillé beaucoup plus en douceur, à mon avis. Testé sur une page en cours d'exécution dans IE8 directement (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');
});

    OriginalL'auteur mckreck

  4. 1

    La page en question est une page très vieux et il les forces IE 8 pour aller dans le mode de compatibilité, de sorte que le css solution n'a pas fonctionné.

    J'ai fini de le fixer à l'aide de la partie suivante de jquery

    Assumer les sélectionner 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"));
  });
    je ne peux pas obtenir le résultat de ce qui peut vous donner une démo sur jsfiddle s'il vous plaît. merci

    OriginalL'auteur Clyde Lobo

  5. 0

    C'était une pratique plugin, je suis tombé sur tout en tri IE8 questions. Faire un coup d'oeil, IE8 DÉVELOPPEZ CHOISIR LA LARGEUR. Des œuvres étonnantes. Easy plug-n-play.

    OriginalL'auteur Nupur

  6. 0

    suivez le lien qu'il peut aider.

    <script>
  $(document).ready(function() {
    $('select').change(function(){
      $("#width_tmp").html($('select option:selected').text());
      $(this).width($("#width_tmp").width()+30); //30 : the size of the down arrow of the select box 
    });
  });
</script>

    OriginalL'auteur Bharath Raj

  7. -4

    Je pense que vous devriez changer le width attribut de paramètre: au lieu de fixe 168px utilisation width:auto; Devrait fonctionner parfaitement.

    La largeur est nécessaire. Cant spécifier auto

    OriginalL'auteur ram