IE7下的select框高度设定

一：问题提出

这个是一个广为人知的bug了。

在IE7下面无法设定select的高度：

select {
height:40px;
}

上面的设定能够在chrome跟firefox下面有效，如下图：

 在IE7下面的效果就是IE浏览器默认的高度：

 应该怎样去思考这个问题？我努力尝试网上各种各样的方法，有javascript模拟的，有css模拟的。

二：问题探索

方法1：javascript模拟：

自己在研究的过程中，javascript模拟的select框成品是这样子的：

首先的思想就是先将<select>隐藏起来（display：none || filter）。

然后，将整个<select>放进一个表单里，将选定的<option>作为一个<input>标签的value。

然后循环读出<option>的值，将其放进新建的<li>中。这是基本的html文档结构。

那么利用javascript动态控制事件。

a.我们首先将标签<li>那块设置为隐藏（display：none）

b.当点击上图存储<option>value<option>值value的<input>标签，我们就将绑定事件（display:block）

c.利用mouseover和mouseout动态增添css控制，如上图蓝色的条条

d.鼠标单击选中的时候，将<option>value值传给<input>框同时将<li>们设为隐藏。

很明显，上述的那个模拟框还需有以下的优化：

a.<option>多起来，它没有<select>应该有的滑动框。

b.<input>框右边应该有个小倒三角形等背景

方法2：css模拟

以下是在IE7下的效果：

以下是html结构：

外层div其实最主要需要设置边框和padding从而模拟高度，第二层div用处是遮盖select框的边框。

然后将div层与.coutrySelect设置overflow:hidden;就可以了。

这个方法是最简单的利用css模拟select框，推荐此法，由于这是在IE7下专用的css，所以，我们可以适当地增添css的hack：

.select-box {
     *padding: 11px 10px 3px 0px;
     *width: 145px;
     *border: 1px solid #ccc;
     *background: #fff;
     display: inline;
     float: left;
     margin-right: 5px;
 }
 .select-wrap {
     *width: 155px;
     *height: 22px;
     *line-height: 16px;
     *overflow: hidden;
     /**padding-left: 2px;*/
 }
 .countrySelcet {
     *margin: -2px 0 0 -2px;
     *width: 200px;
     *height: 20px;
     *font: normal 12px/20px Tahoma,Geneva,sans-serif;
     *overflow: hidden;
     *display: block;
 }