Breite Probleme mit HTML-select innerhalb eines DIV mit IE

Hier ist ein Beispiel, ich habe auf jsfiddle

<div style='width:30px;border:solid 1px'>
  <select style='width:100%'>
    <option>This is my first option</option>
    <option>option</option>
  </select>
</div>

<br/>
<br/>

<div style='width:300px;border:solid 1px'>
  <select style='width:100%'>
    <option>This is my first option</option>
    <option>option</option>
  </select>
</div>

In jedem Browser (FF,Chrome,Safari,IE9,IE9 in den IE8-Modus) andere als IE 7/8, die Optionen der ersten combo sind voll sichtbar. IE8 ist die Begrenzung der Breite der Optionen aus, um die Breite des äußeren div.

Hier ist ein Breite Probleme mit HTML-select innerhalb eines DIV mit IE

Irgendeine Idee, wie das zu reparieren?

InformationsquelleAutor Marc Polizzi | 2012-03-21
  1. 3

    Leider gibt es keine css-Lösung, denn es bezieht sich auf die Elemente Verhalten.
    Als solche werde ich Sie direkt zu einer anderen Quelle.
    http://css-tricks.com/select-cuts-off-options-in-ie-fix/
    Dabei ändert sich die Breite des Elements, wenn es fokussiert wird, und setzt es zurück, wenn es den Fokus verliert. Nicht sehr elegant, aber trotzdem kann die ganze option gesehen werden.
    Hoffe, das hilft.

    • Das war 50/50 zwischen Ihnen und @Tom.
    • Dennis, ist für eine Wette, wäre Sie beantwortet habe, ohne ein Kopfgeld auf diese Frage?
    • Ich hätte, weil es etwas, das ich gestoßen bin bei der Arbeit und hatte nie eine befriedigende Antwort.
    • die Antwort ist, alle CSS-und für mich gearbeitet.
    InformationsquelleAutor Dennis Fagan
  2. 4

    Hinzufügen overflow: hidden; auf das div, das den Stil und die width: auto; float: right; zu den <select> scheint zu funktionieren für mich.

    <div style='width:30px;border:solid 1px; overflow: hidden'>
   <select style='width:auto; float: right;'>
      <option>This is my first option</option>
      <option>option</option>
   </select>
</div>

    Siehe Beispiel arbeiten an http://jsfiddle.net/J7sYq/10/

    • Das war 50/50 zwischen Ihnen und @Dennis.
    • Dieser arbeitete für mich: Hinzugefügt overflow:hidden auf den container, dann width:auto;float:right CSS select:focus.
    InformationsquelleAutor tschoffelen
  3. 1

    Ich weiß, es gibt bereits eine ganze Reihe von Antworten hier. Aber keiner der workarounds wirklich passt meine Forderung, wenn ich traf das gleiche problem: ich brauche zu setzen, wählen Sie die innen eine Feste Breite div. Über die Breite, wird es versteckt und ich will nicht, dies zu sehen - es ist rein hässlich. Das erste mal sah ich diese link, ich dachte, dass ich endlich gefunden, was ich will. Aber nach dem spielen mit der demo war ich enttäuscht. Die CSS-tricks arbeitet ein bisschen, aber es wird sich ändern, die Breite im ganzen und nicht nur die drop-down-Liste. Was ich brauche, ist eine wirklich schöne suchen, wählen Sie einfach, wie es Aussehen sollte auf andere Browser als den IE.

    Endlich habe ich es mir mit javascript und css sowie einige bestimmte ie-version überprüfen. Dies ist eine Zusammenfassung von dem, was ich getan habe:

    1. Verwenden Sie ein transparentes div die gleiche Größe wie das wählen zu decken, die Sie wählen. Jetzt können wir noch sehen, das Element unter dem div, aber wir können nicht klicken Sie auf es.
    2. Das transparente div-jetzt fangt die Maus klicken Sie auf und füllen Sie eine ungeordnete Liste mit den Artikeln aus der wählen Sie. Dann zeigen wir die Liste direkt unter dem original wählen. Es sieht genau wie ein geklickt haben, wählen Sie einen anderen Browser.
    3. Wenn ein Element ausgewählt ist, in die ungeordnete Liste, die Liste wird ausgeblendet, und das entsprechende Element in der ursprünglichen select ausgewählt werden.

    Dieser Ansatz erfordert mehr code, aber es ist wirklich simulieren, die "richtige" Verhalten des wählen Sie. Die ungeordnete Liste ist gestaltet mit css, machen es einfacher, das Aussehen zu verändern. Es ist getestet unter ie7-8.

    Folgenden ist ein screenshot von einer funktionierenden Projekt angesehen in ie 8:

    Breite Probleme mit HTML-select innerhalb eines DIV mit IE

    InformationsquelleAutor dragon66
  4. 0

    Kenne keine Lösung (das ist IE Lust der Welt). Vielleicht ein anderes widget für den IE8 oder weniger (extjs combo, jquery-ui-combo oder einige Popup-Menü "Bibliothek").

    InformationsquelleAutor ic3
  5. -1

    Dies ist was für mich funktioniert:

    <div style='max-width:300px;min-width:300px;border:solid 1px'>
<select style='width:300px'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/><br/>
    InformationsquelleAutor Chris
  6. -2

    verwenden * bevor Sie Ihre css-Eigenschaften für ie-spezifische css-Dateien.
    Wenn markiert mit * nur ie8 kann verstehen

    p.myclass {
     width: 30px;
     *width: 300px;
}/* Just an example*/

    Den ie8-browser seine eigene Eigenschaft, welche Sie angeben und verwenden. Durch diese können Sie aufmerksam Ihre Website spezifisch auf ie8, aber Ihre Immobilie mit * kommen sollte, nachdem Sie die Standard-Eigenschaft. finden Sie unter den code

    • Wie hat dies das Problem lösen ?
    InformationsquelleAutor Kishore Kumar
  7. -2

    Haben Sie angegebene Breite des äußeren div-bestehend aus der select-box. Und es sieht mir das gleiche in allen Browsern.

    Wenn Sie möchten, es zu Strecken, basierend auf der Länge der Optionen in der select-box, dann einfach nur nicht angeben, in beliebiger Breite und nur sagen, width:auto.
    Überprüfen Sie diese http://jsfiddle.net/J7sYq/3/

    • Nein ist es nicht. Überprüfen Sie mit IE8.
    • das, was den markup-Code in Ihre jsfiddle. Hinweis: überprüfen Sie die Breite:30px angegeben <div style='width:30px;border:solid 1px'> <select style='width:100%'> <option>Dies ist meine erste option</option> <option>option</option> </select> </div> <br/><br/> <div style='width:300px;border:solid 1px'> <select style='width:100%'> <option>Dies ist meine erste option</option> <option>option</option> </select> </div>
    • was willst du mir sagen, sorry, ich verstehe nicht.
    • klicken Sie in das erste Kombinationsfeld in Internet Explorer 8, klicken Sie in der combo in FF oder chrome, und du wirst den Unterschied sehen
    • Es tut mir Leid, ich verstehe nicht, was dein problem ist. Es scheint mir das gleiche in allen Browsern. Kannst du screen-shots ?
    • Hast du den test im IE8 (IE9 nicht mit Kompatibilität) ?
    • Es ist einfach, IE8 ist der einzige, in dem die Optionen sind geschnitten, um die Größe der select-box (Sie sehen nur ein paar Zeichen). Für alle anderen die Optionen sind larget als die 30px, also voll sichtbar ist.
    • Ich habe nicht überprüfen Sie im standalone IE8.
    • Ich aktualisiert meine Antwort.

    InformationsquelleAutor Abhidev
Schreibe einen Kommentar