各浏览器中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>

示例：

1 2

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>	

示例：

1

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

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

示例：

1

 

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>