select的高度和边框
突然要美化一个顽固的select元素，才发现这个还是有点点难度的，难就难在人家IE不卖帐。
1. 先说select的高度设置吧
按照常理只要给它设置height，就完事，但在IE6 下，会比实际设定高度高出几个像素，不信你就试试在不同的浏览器下运行下面的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test select</title> <style type="text/css"> body{font-family:tahoma;font-size:12px;margin:0;padding:0;} .select-outter{position:absolute;top:50%;left:50%;width:500px; height:500px;margin:-250px auto 0 -250px;background:#F6F6F6;} </style> </head> <body> <div class="select-outter"> <select> <option>bingo-1</option> <option>bingo-2</option> </select> </div> </body> </html>
解决办法，就是针对IE6用font-size来控制，但是字，就有点难看了-_-!。
看看代码：
Tips:You can change the code before run.
2.border问题
搞定高度了，如果我要让select的border变个颜色呢？这个也有点难，我初步的想法是通过绝对定位四个块元素到它的四个边来覆盖它本身的border，但在IE6下，还是失败，但其他浏览器都做到一致了。最后找到的方法是利用negative margin的方法来将原有select的border给隐藏，而显示它外围包含元素的border：
Tips:You can change the code before run.