Weird CSS issues with Internet Explorer 8 on <select> elements when using min-width
IE8 has this weird min-width issue with the <select> element, where the box model on the <select> element correctly honors the min-width style property, but the actual <option> elements when using a multiple <select> element end up using the maximum width of the widest <option> element.
Setting the width on the <option> elements has no effect and I want a pure CSS solution.
Here's an example of the bug:
Single selects work as expected
Multi-selects do not work as expected
Here's what the CSS looks like:
<style type="text/css"> select { min-width: 100px; } </style>
Does anyone know a pure CSS solution to fixing the <option> elements so that they inherit the width of the <select> element?
Here's what it looks like in Internet Explorer 8:
Notice how the selected elements don't span to the edge of the select element.
Here's how I would expect it to look:
