IE 8 Se selectează textul din casetă care este trunchiat

Textul din elementele casetei selectate este trunchiat la încărcarea inițială, până când un utilizator dă clic pe caseta de selectare care arată astfel:

enter image description here

Odată ce utilizatorul face clic, textul se va extinde pentru a spune "Femeie". Acest lucru se întâmplă numai în IE.

De asemenea, se pare că dacă există suficientă text în caseta de selectare, atunci trunchierea ta nu se va întâmpla. Tocmai am observat acest comportament:

enter image description here

Presupun că nu există un cârlig de stil pentru textul unui selector? Pe baza acestor informații, cred că adăugarea unui buchet de spațiu alb la o opțiune care are o lungime mai mică de 6 caractere (sau ceva) ar fi o soluție acceptabilă, dacă nu enervantă.

Iată ce arată selectul când se concentrează:

enter image description here

Am încercat fiecare soluție în acest post:

Selectați meniul derulant cu lățimea fixă ​​care taie conținutul în IE

Ceea ce pare să fie pentru a merge la post pentru această problemă. Nici JavaScript sau tehnicile CSS par să rezolve această eroare.

Se pare că aceasta ar fi o problemă obișnuită; poate cineva să sugereze o soluție de CSS pur care să abordeze acest bug în IE care nu este menționat în postul de mai sus?

Mulțumesc.

0
Lucrează pentru mine atât în ​​IE, cât și în Firefox. jsfiddle.net/pL33j1u4 Ar putea fi un conflict cu altceva?
adăugat autor Joseph Norris, sursa
Arătați CSS asociat cu această parte a codului HTML.
adăugat autor Diodeus - James MacFarlane, sursa