各浏览器中option元素的表现差异

1、IE6/7/8/9中无事件(如click,mouseover),Firefox/Safari/Chrome/Opera则有

<select id="s1" multiple="multiple">
	<option value="1" onclick="alert(1);">1</option>
	<option value="2" onclick="alert(2);">2</option>
</select>

示例:



2、点击option,通过srcElement获取事件源目标在IE中是select,Firefox/Safari/Chrome/Opera则是option

<select id="s2" multiple="multiple">
	<option value="1" >1</option>
</select>
<script>
	document.getElementById('s2').onclick = function(e){
		var evt = window.event || e;
		var target = evt.srcElement || evt.target;
		alert(target.tagName);				
	}
</script>	

示例:



3、IE6下给option元素添加title属性实现tips功能无效

<select id="s1" multiple="multiple">
	<option value="1" title="tips">1</option>
</select>

示例:

 

4、IE6中option无法完全显示

当我们给select指定宽度,但option的内容有时比较多,这时其它浏览器的option会根据内容自适应宽度,以让option内容能完整显示。但IE6则不行,option内容显示不完全。

如下代码

<select style="width:70px">
    <option value="">自定义</option>
    <option value="给你充话费,给我做腊八粥,不解释!">给你充话费,给我做腊八粥,不解释!</option>    
    <option value="最后的口粮都给你充话费了,记得还我钱啊T_T">最后的口粮都给你充话费了,记得还我钱啊T_T</option>
</select>

点击select后,各浏览器表现

1. 非IE6浏览器

 

2. IE6浏览器

 

可以看到IE6中option里的文字显示不完整。 解决方案是用一个元素包住select,利用overflow-x属性,如下

<style type="text/css">
    #selectDiv {
        width: 60px;
        overflow-x:hidden;
        display: inline-block;
    }
    select {
        height: 23px;
        line-height: 23px;
        margin-right: 10px;
        min-width: 63px;            
    }
</style>
<span id="selectDiv">
    <select id="" name="" onchange="">
        <option onmouseover="setZiDingYi()" value="">自定义</option>
        <option value="给你充话费,给我做腊八粥,不解释!">给你充话费,给我做腊八粥,不解释!</option>    
        <option value="最后的口粮都给你充话费了,记得还我钱啊T_T">最后的口粮都给你充话费了,记得还我钱啊T_T</option 
    </select>
</span>

 

 

 

 

posted on 2011-03-20 14:06  snandy  阅读(4202)  评论(3编辑  收藏  举报