Drop-down list in IE8 using <select> truncat

2019-07-11 01:41发布

问题:

Possible Duplicate:
fix size drop down with long text in options (restricted view in IE)

Drop-down lists do not work properly on IE8. Options with long text are truncated. Firefox and Chrome work fine and adjust the list window according to the longest option's text.

The following HTML is an example:

<html>
<body>
      <select STYLE="width: 150px" onchange="javascript:window.open(this.value)">
        <option value="week1.html">option 1</option>
        <option value="week2.html">many characters are here in option 2</option>
        <option value="week3.html">option 3</option>
      </select>
    </form>

  </body>

</html>

Another thread in StackOverflow suggests using css-based solution:

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

However I could not understand how to use those options in my HTML. Is this the right approach? If so, how should I use it? Any other ideas so a drop-down list in IE8 resizes dynamically like in Firefox?

Thank you.

IE8 does not support the :focus css selector. See the following link for a coprehensive list of css supported features by browser.

http://www.quirksmode.org/css/contents.html

Your best bet is to use jQuery or another js framework which replicates the missing functionality.