Ecco, quello che vedi nella foto è ciò che accade esattamente quando si cerca di dare una dimensione fissa ad una select. Purtroppo quelli che, a mio avviso, non possono più considerarsi “browser” come li pensiamo noi, tagliano brutalmente i contenuti delle tendine senza alcuna pietà.
Se per IE6 l’unica strada percorribile è quella di utilizzare script che “trasformano” la select in un div (ma vi assicuro che potreste uscirne davvero pazzi), per IE7 è stato realizzato uno script da Craig Hoover (reso pubblico su css-tricks.com)che, inserito rigorosamente prima della chiusura del <body>, e come ultimo script, permette di ottenere anche su IE7 lo stesso tipo di renderizzazione grafica che si ha per le opzioni delle select nei browser moderni.
(da visualizzare con Internet Explorer 7)
jQuery per risolvere…
Vi riporto quindi, così come è stato pubblicato, il codice da incollare affinchè questo odioso problema si risolva.
// Safely use $
(function($) {
$.fn._ie_select=function() {
return $(this).each(function() {
var a = $(this),
p = a.parent();
p.css('position','relative');
var o = a.position(),
h = a.outerHeight(),
l = o.left,
t = o.top;
var c = a.clone(true);
$.data(c,'element',a);
c.css({
zIndex : 100,
height : h,
top : t,
left : l,
position : 'absolute',
width : 'auto',
opacity : 0
}).attr({
id : this.id + '-clone',
name : this.name + '-clone'
}).change(function() {
$.data(c,'element')
.val($(this).val())
.trigger('change')
});
a.before(c).click(function() {
c.trigger('click');
});
}); // END RETURN
}; // END PLUGIN
// Usage
if ($.browser.msie) {
$('select')._ie_select();
}
})(jQuery); // END SAFETYDa notare come in chiusura di script venga effettuata la verifica del browser affinchè lo script venga eseguito solo sui browser microsoft.
Se invece si volesse eseguire lo script unicamente se viene riconosciuta la versione 7 di Explorer, è possibile sostituire con:
var isIE7 = $.browser.msie && parseFloat($.browser.version) == 7;
if (isIE7) {
$('select')._ie_select();
}E tu che tecnica utilizzi di solito?
Immagini e fonte dello script: css-tricks.com
