三、改变下拉列表样式
下拉列表（菜单）是大家最头疼的一个元素，因其对许多样式不生效，故而在页面中显示很丑陋，而且在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>请选择项目：</p> <p> <select name="select" id="select" class="select"> <option>请选择----------------</option> <option>标准之路</option> </select> </p> <div class="tip">看看谁能把我挡着</div> </body> </html> |
提示：可以先修改部分代码后再运行
在三个浏览器下显示都不尽相同，所以最好是寻求其它的办法或者使用默认样式了。基中IE6下被遮挡可以把浮动层用iframe，因下拉列表不会跑到iframe上边。有更高美化需求的可以用div模拟来代替下拉列表，但这种方法实现起来麻烦。
Div+CSS速成第十天:di
Div+CSS速成第一天：X
跨浏览器兼容的CSS编码
视频:DIVCSS网站制作视
DIV+CSS网页布局技巧2
Dreamwerver 8.0
AE: After Effects CS5.5![会声会影X5入门到精通01：入门篇[视频教程]](/upfiles/image/201507/hshyx5z1.jpg)
会声会影X5入门到精通
腾讯电脑管家最新版
2345手机浏览器
