开发者

Width of <selects> in Safari 5.0.5 for Windows

I'm developing a web form, and works well in Firefox 4 and 3.6, Chromium 11, Opera 11.10, and开发者_C百科 IE 8, but in Safari 5.0.5 for Windows, all <select>s have more width, thus breaking the layout. This is a screenshot comparing the reult with Firefox 3.6:

Width of <selects> in Safari 5.0.5 for Windows

The weird thing is that in Safari 5.0.5 for Mac it is displayed as expected. What could be happening? It seems that the arrow is using space beyond its box. Here is the 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;
}

By the way, Firebug Lite for Safari reports the same computed width that in other browsers.


select {
    -webkit-appearance: none;
}


It looks like your select boxes are the ones that are causing the problem.

Some browsers will force the select box width to be at least as wide as the widest option in the given select. See if this is the problem you are having by trimming down the number of characters in your options.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜