IE8 CSS与IE7和Firefox不同

Question

I'm applying a css style to a select dropdown and input textboxes.

The style appears to work in IE7 and Firefox but not in IE8.

The css is:

input.text, input.file, textarea.textarea, select.select 
{
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    color:#333;
    margin:0;
    padding:4px;
}

input.text, textarea.textarea, select.select{
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddd;
}

The style appears to apply fine to textboxed but not selects/

Any ideas about why this is happening in IE8?

                                    <label class="desc" >
                                        First name</label>
                                    <input type="text" name="nuFirstname" id="nuFirstname" class="text pop" value="" /></li>
                                <li>
                                    <label class="desc" >
                                        Surname</label>
                                    <input type="text" name="nuSurname" id="nuSurname" class="text pop" value="" /></li>
                                <li>
                                    <label class="desc" >
                                        Colour</label>
                                    <select class="select pop" id="nuDept" name="nuDept">
                                        <option value="-" selected="selected">-</option>
                                        <option value="2">Green</option>
                                        <option value="3">White</option>
                                        <option value="4">Orange</option>

                                    </select></li>

Answer 1

If you want your select boxes to look the same cross browser, I suggest using a jQuery plugin ( something like this ) to do so. Unfortunately, you will never have consistent results with select boxes if you try to control them with just CSS. It's just the way of the web... for now.

Answer 2

Have a read of this and check to see what 'mode' of IE you're in to see how it's interpreting the code. I don't believe this applies to newer versions of IE (ie >=9ish probably)

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

Answer 3

You may want to have look at it,

http://www.evotech.net/blog/2009/03/ie8-css-support/ link text

Answer 4

Ok seems like someone was having the same problem.

IE8 and border css property on select menus

The solution appears to be putting this line in the header:

What on earth is going on with IE8?