井井客

搜索

select元素做到IE7/IE6高度兼容的几种方法

众所周知的select标签的兼容性是坑前端的,甚至为了让select兼容而需要写大量的select兼容性代码,本文仅探讨select高度兼容的几种方法。

select元素做到IE7/IE6高度兼容的几种方法

因为不常用select标签,所在在用select时遇到高度不兼容的问题,首先试了Height属性(不管用-浏览器存在差异),然后试了padding属性(同样不管用),最后只能认命的百度了几种方法并且整理了一下文章以备下次不时之需。

首页先了解select标签属性在各浏览器里面的兼容情况。

selectf标签属性在各浏览器的支持情况表

1、通过定义字体来实现select高度兼容IE7的方法

因为直接给select定义高度是达不到各浏览器兼容的,而同时给select定义一个字体,则能在IE7时高度的值不会消失。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过定义字体来实现select高度兼容的方法</title>
<style>
select { font-size:14px; font-family:Arial; height:30px; vertical-align:middle;}
</style>
</head>
<body>
<select>
    <option>选择1</option>
    <option>选择2</option>
</select>
</body>
</html>

IE6没有看,IE7里面高度虽然达到了兼容(各浏览器中几个像素差异就不算了),但是文字会向下对齐。尽管能使用却不是很推荐此类方法。

2、select高度定义为默认高度值以达到兼容各浏览器

参照之前的表也可以看出来,默认的select高度的值在20-22PX像素左右,那如果我们把高度定义成20像素左右,那各浏览器的差异就不是很大了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select高度定义为默认高度值以达到兼容各浏览器</title>
<style>
*{padding:0; margin:0}
body{font-size:12px}
select{height:22px; line-height:18px; padding:2px 0}
</style>
</head>
<body>
<select>
    <option>选择1</option>
    <option>选择2</option>
</select>
</body>
</html>

这种方法能使各浏览器在select高度方面差异较小,基本算是select全浏览器兼容,看情况使用。

3、通过CSS隐藏边框并在外面加DIV实现select高度兼容

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>通过CSS隐藏边框并在外面加DIV实现select高度兼容</title>
<style>
* { padding:0; margin:0;}
body { font-size:12px;}
.selectBox { padding:6px 5px;width:150px;border: 1px solid #ccc;background: #fff;}
.selectWrap { width:150px; height:20px; line-height:16px; overflow: hidden;}
.selcet01 { margin:-1px 0 0 -2px; border:0px; width:150px; font-family:"\5FAE\8F6F\96C5\9ED1"; overflow: hidden; display: block; *margin-top:-2px;}
</style>
</head>
<body>
<div class="selectBox">
  <div class="selectWrap">
    <select class="selcet01">
      <option>选择1</option>
      <option>选择2</option>
    </select>
  </div>
</div>
</body>
</html>

感觉这种方法相较第一种美观要略好一些,但是相比第二种则略差些。虽然可以达到select高度兼容,文章也基本居中,但是还是有一些细节上不尽如人意的地方。

4、JQ代码实现仿select兼容种浏览器

<!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>JQ代码实现仿select兼容种浏览器</title>
<script type="text/javascript" src="http://www.jingjingke.com/res/js/jquery1.8.2.min.js"></script>
<style>
body,div,ul,li { padding:0; margin:0;}
body {font-family:"\5FAE\8F6F\96C5\9ED1"; padding:50px 0 0 50px; background:#e8e8e8	;}
.searchbox {width:240px; height:50px; position:relative; margin-bottom:20px; z-index:99; background:#fff;}
.searchbox label { font-size:14px; line-height:50px; position:absolute; left:5px; z-index:1;}
.searchbox i { position:absolute; top:0; right:0; font-style:normal; display:block; width:50px; height:50px; line-height:50px; background:#f9de5a; color:#fff; text-align:center;  z-index:1;}
.searchbox input { width:240px; height:50px; display:block; font:14px/50px "\5FAE\8F6F\96C5\9ED1"; text-indent:75px; border:none;background:url(../images/trust_select.png) no-repeat; cursor:pointer; overflow:hidden; position:relative; z-index:2;}
.searchbox ul {width:236px; display:block; position:absolute; left:0; top:50px; z-index:101; background:#fff; border-bottom:2px solid #f9de5a; padding:2px; overflow:hidden; display:none;}
.searchbox ul li {display:block;height:50px;line-height:50px; font-size:14px; padding:0 10px; cursor:pointer; overflow:hidden; border:none;}
.searchbox ul li.hover {background:#faecaf;} 
</style>
</head>
<body>
<div class="searchbox">
    <label>请选择:</label>	
    <input name="doorsill" type="text" value="不限" rvalue="0" readonly="readonly" id="doorsill">
    <i>?</i>
    <ul>
        <li value="0">不限</li>
        <li value="1">方案1</li>
        <li value="2">方案2</li>
        <li value="3">方案3</li>
        <li value="4">方案4</li>
    </ul>
</div>
<script type="text/javascript">
$(".searchbox input").click(function(){
	var thisinput=$(this);
	var thisul=$(this).parent().find("ul");
	if (thisul.css("display") == "none") {
		thisul.fadeIn("100");
		thisul.hover(function () {
		}, function () {
			thisul.fadeOut("100");
		})
		thisul.find("li").click(function () {
			thisinput.val($(this).text());
			thisinput.attr("rvalue", $(this).get(0).getAttribute("value"));
			thisinput.attr("v", $(this).attr("v"));
			thisul.fadeOut("100");
		}).hover(function () {
			$(this).addClass("hover");
		}, function () {
			$(this).removeClass("hover");
		});
	}
	else{
		thisul.fadeOut("fast");
	}
});
</script>
</body>
</html>

其实是拿UL列表做的样式,通过JQ仿的一个select下拉菜单。兼容性比较好,样式也可以做的很美观。缺点可能就是CSS代码和JQ代码要写的比较多,并且还需要添加JQ插件。

综合上面的几种方法,我个人是比较喜欢第二种和第四种,也只有这两种能够最大的保证select兼容各浏览器效果。不过也要看实际中的要求啦,看项目怎么方便怎么来?(ˉεˉ?) 。

文章TAG:HTML

作者:井井客原创来源:互联网
本文标题:select元素做到IE7/IE6高度兼容的几种方法
本文链接:/c/11114.html

上一篇:jquery中的事件方法分类整理
下一篇:解决HTML5标签不兼容的方法

文章分类

相关阅读

随便看看