Warum kürzen Auswahl-Dropdown-Menüs mit fester Breite den Inhalt im Internet Explorer ab und wie kann ich das beheben?

Dropdowns mit fester Breite auswählen und Inhalte im IE abschneiden

Problembeschreibung:

Wann Bei Verwendung eines Auswahl-Dropdowns mit fester Breite kann es sein, dass bestimmte Elemente Text enthalten, der die angegebene Breite überschreitet, was zu einer Kürzung im Internet Explorer (IE) führt. Browser. In IE6 und IE7 ist die Dropdown-Liste auf die angegebene Breite beschränkt, sodass der vollständige Inhalt längerer Elemente nicht angezeigt werden kann.

CSS und HTML:

Die Der bereitgestellte CSS- und HTML-Code demonstriert dies Problem:

select.center_pull {
    width: 145px;
}

<select>

Lösung:

IE 8 und höher:

Für IE 8 und höher , eine einfache CSS-basierte Lösung löst das Problem:

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

Diese Regel passt die Breite des an Dropdown-Liste, um das längste Element aufzunehmen, wenn das Dropdown fokussiert ist.

IE 7 und niedriger:

Leider unterstützen IE 7 und niedriger den :focus-Selektor nicht. Daher sind zusätzliche Techniken erforderlich, um das Problem anzugehen Kürzung:

• JavaScript: Berechnen Sie dynamisch die Breite des längsten Elements und legen Sie die Breite der Dropdown-Liste mithilfe von JavaScript entsprechend fest.
• CSS-Hacks : Verwenden Sie CSS-Hacks, um eine breitere Dropdown-Liste für den IE zu erzwingen, z. B. die Anwendung der width: auto-Regel mit einer höheren Priorität für IE-Browser speziell.

Das obige ist der detaillierte Inhalt vonWarum kürzen Auswahl-Dropdown-Menüs mit fester Breite den Inhalt im Internet Explorer ab und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!