Dropdown width on IE7/IE8

HTML

<script src="http://demo.orbeon.com/orbeon/v/ops/yui/yahoo/yahoo.js"></script>
<select>
    <option value="1">Supporting permissions in your persistence API implementation</option>
    <option value="2">CoffeeScript: Create objects referencing other properties</option>
    <option value="3">Owner/group-based permissions AKA "See your own data"</option>
    <option value="4">Automatic schema generation for forms you create in Form Builder</option>
</select>
<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

CSS

select { 
    width: 150px;
    display: block;
    margin: 50px 0 100px 0;
}

JavaScript

function selectDropDownIEBehavior() {

    // Apply this behavior only for IE8 and under
    if (YAHOO.env.ua.ie == 0 || YAHOO.env.ua.ie > 8) return;

    // Register handlers
    // In Orbeon Forms, use .fr-body instead of body
    $("body")
		.on('mousedown'   , 'select', expand)
        .on('blur change' , 'select', contract);

    function expand() {
        var select = $(this);
        if (! autoMakesSelectNarrower())
            select.css("width", "auto");

        function autoMakesSelectNarrower() {
            var clone = select.clone();
            clone.css("width", "auto").hide();
            select.after(clone);
            var cloneWidth = clone.width();
            clone.remove();
            return cloneWidth < select.width();
        }
    }

    function contract() {
        $(this).css("width", "");
    }
}

$(selectDropDownIEBehavior);