IE8 and border css property on select menus

Question

I am getting a really strange behaviour when viewing a very simple piece of HTML in IE, served up by IIS. I am at a loss to explain this...

Take the following html

Answer 1

This might fix the issue:

 <style type="text/css">
      .iWantaBorder
      { 
        border:solid 1px red;
        display:inline-block; /*this should fix the bottom and right border*/
      }
</style>

EDIT:

I have tried replicating the issue, you are right it doesn't work on IE8 but if you are on IE8 Standards/Compatibility mode it works on IE7 Standards/QuirksMode it does not, don't know why it's not working on IE7 Standards/Quirksmode.

Anyway another workaround is to wrap the select element with another inline element and put the border on wrapper element.

<span class="iWantBorder">
   <select>
      <option>Sample Option</option>
   </select>
</span>

Answer 2

Try this:

border: 1px solid red;

The border shorthand syntax should be weight, style, colour. You appear to have this in the wrong order.

Putting these in the wrong order might put IE8 into quirks mode, possibly causing your problem.

Answer 3

try putting this in your HEAD tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

as per: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

Answer 4

As it was form controls the border won't display in IE8, if you want develop custom select box to display in all browser consistently.

Quirks mode is nothing but document type declaration, if you use strict.dtd in the document type deceleration it will always render in standards mode.

Form controls (Radio button, check box, select box and dropdown) always renders depending on the operating system and browsers unless you develop custom controls.