ie中怎么改变select的高度
展开全部
大家都知道select是无法设置高度和边框颜色等等的在ie67下面，其他的都是可以的，所以有时候为了在所有的浏览器下显示都一致，就使用了js的模拟，这个是大家经常碰到的，js不光要模拟外观还有模拟事件，有时候感觉有些麻烦，但是js模拟的最大优势就是外观可以任意设置，通用性强，就是在操作提交数据的时候有些麻烦，因为这个要用在不同的位置。就需要写很多不同的class或者id。（不过js还是最合适的）
我想尝试使用css来模拟实现可改变高度，其实ie67下可以通过设置font-size来实现改变select的高度，但是这个是个不是很靠谱的方法，我说下我实现的原理：
第一步：就是在select外边加上两个div分别是 select-outer 和select-inner，然后给他们成inline-block，这样主要为了模拟select是内联元素，然后给select-inner设置一个宽度和高度，这个宽度和高度就是实现重点，为什么呢？大家可以自己做个测试，看看一个不设置任何属性的select高度是多少？这个我做了测试，但是我给select设置了font-size:12px;因为这个是基本的不然汉字都看不清楚别的就不需要在谈了，然后我给select设置了border:1px solid #ccc;同理也是为了统一不同的浏览器对select边框设置的不同，在这两个前提下我做了测试：IE67：21px； IE8：19px；IE9：18px；FF：18px；chrome：19px；safari：18px；从结果上可以看出，这种情况下的select的高度最大是21最小是18，还有就是我们发现ie67是一样的，并且只有ie67不能更改高度，那么解决的方案来了，那就是把select的高度设置21，那么这个时候所有的浏览器的select的高度相同了，第一步解决了。
第二步：截掉select默认的边框，这个时候我们的select-inner就派上用场了，方法是给select设置position:relative;margin:-1px;然后给select-inner 设置高度，高度就是上面的21-2=19，我想这个大家应该明白用意了，然后设置overflow:hidden，以及display:inline-block（这里就不再介绍它的兼容设置了，相信大家都很熟悉了）,这样设置完在浏览器中看，除去ie67有瑕疵外其余的良好边框被截掉，但是ie67下的左右边框截取的不好，想想应该是没有给select-inner设置宽度的原因，设置了宽度后ok都正常，现在的问题来了，宽度是多少取决于你给select设置了多度是多少？所以当select使用在诸多不同的位置的时候这个问题怎么解决呢？这个也着实让我很头疼没有办法解决（如果你有好的方法可以告诉我），最后我使用了一个比较笨的方案，那就是给select-outer再加上一个class来控制宽度，这样灵活性变得差了许多。
第三步：设置改变高度，我想你如果仔细看完上面的内容，那么答案就很简单了，那个是select-outer设置padding，这个padding-bottom=padding-top=(你要设置的高度-19)/2,当然padding的左右是多少你可以设置。然后给select-outer设置你想要的边框和边框颜色，到这里就基本上完成了。其实我们可以把padding和边框等等设置到上面说的另加的class上去，这样只需要换这个class即可以不同的显示效果了！
下面是代码示例：
<!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>无标题文档</title>
<style type="text/css">
* { padding:0; margin:0; }
body { text-align:center; padding:50px;}
.select-outer { display:inline-block; *display:inline; zoom:1; border:1px solid #ccc; }
.select-inner { display:inline-block; *display:inline; zoom:1; height:19px; overflow:hidden; position:relative; }
.select-h { border:1px solid #ccc; height:21px; font-size:12px; position:relative; zoom:1; margin:-1px; }
.select-wh200 { padding:3px; }
.select-wh200 .select-inner { width:200px; }
.select-wh200 select { width:202px; }
</style>
</head>
<body>
<div class="select-outer select-wh200">
<div class="select-inner">
<select name="" class="select-h">
<option value="">web标准学习aa</option>
<option value="">jQuery学习</option>
</select>
</div>
</div>
<div class="select-outer select-wh200">
<div class="select-inner">
<select name="" class="select-h">
<option value="">web标准学习</option>
<option value="">jQuery学习</option>
</select>
</div>
</div>
<div class="select-outer select-wh200">
<div class="select-inner">
<select name="" class="select-h">
<option value="">web标准学习</option>
<option value="">jQuery学习</option>
</select>
</div>
</div>
</body>
</html>
我想尝试使用css来模拟实现可改变高度，其实ie67下可以通过设置font-size来实现改变select的高度，但是这个是个不是很靠谱的方法，我说下我实现的原理：
第一步：就是在select外边加上两个div分别是 select-outer 和select-inner，然后给他们成inline-block，这样主要为了模拟select是内联元素，然后给select-inner设置一个宽度和高度，这个宽度和高度就是实现重点，为什么呢？大家可以自己做个测试，看看一个不设置任何属性的select高度是多少？这个我做了测试，但是我给select设置了font-size:12px;因为这个是基本的不然汉字都看不清楚别的就不需要在谈了，然后我给select设置了border:1px solid #ccc;同理也是为了统一不同的浏览器对select边框设置的不同，在这两个前提下我做了测试：IE67：21px； IE8：19px；IE9：18px；FF：18px；chrome：19px；safari：18px；从结果上可以看出，这种情况下的select的高度最大是21最小是18，还有就是我们发现ie67是一样的，并且只有ie67不能更改高度，那么解决的方案来了，那就是把select的高度设置21，那么这个时候所有的浏览器的select的高度相同了，第一步解决了。
第二步：截掉select默认的边框，这个时候我们的select-inner就派上用场了，方法是给select设置position:relative;margin:-1px;然后给select-inner 设置高度，高度就是上面的21-2=19，我想这个大家应该明白用意了，然后设置overflow:hidden，以及display:inline-block（这里就不再介绍它的兼容设置了，相信大家都很熟悉了）,这样设置完在浏览器中看，除去ie67有瑕疵外其余的良好边框被截掉，但是ie67下的左右边框截取的不好，想想应该是没有给select-inner设置宽度的原因，设置了宽度后ok都正常，现在的问题来了，宽度是多少取决于你给select设置了多度是多少？所以当select使用在诸多不同的位置的时候这个问题怎么解决呢？这个也着实让我很头疼没有办法解决（如果你有好的方法可以告诉我），最后我使用了一个比较笨的方案，那就是给select-outer再加上一个class来控制宽度，这样灵活性变得差了许多。
第三步：设置改变高度，我想你如果仔细看完上面的内容，那么答案就很简单了，那个是select-outer设置padding，这个padding-bottom=padding-top=(你要设置的高度-19)/2,当然padding的左右是多少你可以设置。然后给select-outer设置你想要的边框和边框颜色，到这里就基本上完成了。其实我们可以把padding和边框等等设置到上面说的另加的class上去，这样只需要换这个class即可以不同的显示效果了！
下面是代码示例：
<!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>无标题文档</title>
<style type="text/css">
* { padding:0; margin:0; }
body { text-align:center; padding:50px;}
.select-outer { display:inline-block; *display:inline; zoom:1; border:1px solid #ccc; }
.select-inner { display:inline-block; *display:inline; zoom:1; height:19px; overflow:hidden; position:relative; }
.select-h { border:1px solid #ccc; height:21px; font-size:12px; position:relative; zoom:1; margin:-1px; }
.select-wh200 { padding:3px; }
.select-wh200 .select-inner { width:200px; }
.select-wh200 select { width:202px; }
</style>
</head>
<body>
<div class="select-outer select-wh200">
<div class="select-inner">
<select name="" class="select-h">
<option value="">web标准学习aa</option>
<option value="">jQuery学习</option>
</select>
</div>
</div>
<div class="select-outer select-wh200">
<div class="select-inner">
<select name="" class="select-h">
<option value="">web标准学习</option>
<option value="">jQuery学习</option>
</select>
</div>
</div>
<div class="select-outer select-wh200">
<div class="select-inner">
<select name="" class="select-h">
<option value="">web标准学习</option>
<option value="">jQuery学习</option>
</select>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
