三、改变下拉列表样式
下拉列表(菜单)是大家最头疼的一个元素,因其对许多样式不生效,故而在页面中显示很丑陋,而且在IE6下总在最上层,造成许多弹出层不能把其遮挡(可恶的IE6呀),使页面的用户检验大打折扣,所以一些设计师想出了许多办法来改变这种情况。
IE6下对下拉列表的背景和宽度样式生效,其它绝大部分不生效,IE8下增加了对边框和高度的支持。但这样似乎离我们要求还很远,所以不得不寻求其它的办法了。先看下面三个图,同一代码分别在IE6、FF、IE8下显示的差异吧。
- <!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=gb2312" />
- <style type="text/css">
- .select { border:1px solid #f60; background:#FF9; height:30px;}
- .tip { width:50px; border:1px solid #ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px;}
- </style>
- </head>
- <body>
- <p>请选择项目: