IE10中下拉框 title被遮挡以及部分option无法显示的问题

在IE10和IE11中，选中下拉框最下方的数据项，鼠标盘旋在下拉框各个选项上，发现选中焦点上方的选项无法提示title；在IE10中option的title容易被下拉框覆盖。当然这些显示问题在chrome中并不存在。

解决方法：1. 每次将选中条目置于下拉框第一个位置，这样其他所有条目都可以显示title；2. 由于在ie10中提示的title容易被下拉框覆盖，加zIndex属性设置option绝对高度即可。当然还可以自己自定义select，不过这样比较麻烦。选中option时，创建一个新的select，并注册onchenge事件（ie中只支持attachEvent，不支持addEventListener），然后该option置于首个位置，最后添加newSelect再删除原select。具体代码如下：

function getNewOption(selectedOp) {
		var newOp = document.createElement("OPTION");
		newOp.value= selectedOp.value;
		newOp.text = selectedOp.text;
		newOp.title = selectedOp.title;
		newOp.style.zIndex = 1;
		return newOp;
	}
	function setFirstOpt() {
		var papercodeSe = document.getElementById("paperCode");
		var newSelect = document.createElement("select");
		//给newSelect绑定onchange事件
		newSelect.attachEvent('onchange', setFirstOpt);
		newSelect.id = papercodeSe.id;
		newSelect.name = papercodeSe.name;
		var selectIndex = papercodeSe.selectedIndex;
		var selectedOp = papercodeSe.options[selectIndex];
		//将选中option放入newSelect首位
		newSelect.add(getNewOption(selectedOp));
		papercodeSe.remove(selectIndex);
		for (var i = 0;i < papercodeSe.length;i++) {			

newSelect.add(getNewOption(papercodeSe.options[i]));
		}
		//添加newSelect后删除原select
		papercodeSe.parentNode.appendChild(newSelect);
		papercodeSe.parentNode.removeChild(papercodeSe);
	}

html下拉框如下：

<select name="paperCode" id="paperCode" οnchange="setFirstOpt();">
	<c:forEach items="${listPaperCode}" var="paperCode">
		<option style="z-index: 1" title="${paperCode.colDescriptionDetail}" <span style="font-family: Arial, Helvetica, sans-serif;">value="${paperCode.pkPapercode}"></span>

	${paperCode.pkPapercode}-${paperCode.colDesc}</option>
	</c:forEach>
</select>

注意：代码只作为参考，拿去用的话还得自己改改部分内容。