While developing a web form, everything seemed to work perfectly in Firefox 4 and 3.6, Chromium 11, Opera 11.10, and IE 8. However, in Safari 5.0.5 for Windows, all <select> elements appear wider, causing the layout to break. A comparison screenshot with Firefox 3.6 clearly shows the issue.
The interesting part is that Safari 5.0.5 for Mac displays the form correctly. So, what could be causing this discrepancy? It appears that the arrow in the select box is taking up more space than it should. Here is the relevant CSS:
select{
-moz-border-radius:5px;
border-radius:5px;
-moz-box-sizing:content-box;
-ms-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
display:block;
height:19px;
margin:0;
padding:1px;
background:#eee;
border:1px solid #a7a7a7;
width:128px;
}
Interestingly, Firebug Lite for Safari shows the same computed width as other browsers.